From 026457dac41ec0b243231fc713306e5ef6f49542 Mon Sep 17 00:00:00 2001
From: Chaim <chaim@marcus-law.co.il>
Date: Sun, 10 May 2026 08:34:52 +0000
Subject: [PATCH] fix(precedent-edit): sync form from record without useEffect
 flash
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace useEffect-based form hydration with React's approved derived-state
pattern (setState-during-render). This eliminates the one-frame flash where
the precedent_level Select showed "—" before useEffect fired, and fixes
cases where the same record reference returned from TanStack cache caused
useEffect to not re-run after save+invalidate.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/precedents/precedent-edit-sheet.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/web-ui/src/components/precedents/precedent-edit-sheet.tsx b/web-ui/src/components/precedents/precedent-edit-sheet.tsx
index 146c13f..cbf967d 100644
--- a/web-ui/src/components/precedents/precedent-edit-sheet.tsx
+++ b/web-ui/src/components/precedents/precedent-edit-sheet.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Save, Sparkles } from "lucide-react";
 import { toast } from "sonner";
 import {
@@ -65,10 +65,12 @@ export function PrecedentEditSheet({ caseLawId, onOpenChange }: Props) {
 
   const [form, setForm] = useState<FormState>(EMPTY);
 
-  // Hydrate form when the record loads.
-  useEffect(() => {
-    if (!record) return;
-    // eslint-disable-next-line react-hooks/set-state-in-effect
+  // React-approved derived-state pattern: sync form whenever a different
+  // record arrives (including after save+refetch). Using setState during
+  // render avoids the one-frame flash that useEffect would produce.
+  const [syncedRecordId, setSyncedRecordId] = useState<string | null>(null);
+  if (record && record.id !== syncedRecordId) {
+    setSyncedRecordId(record.id as string);
     setForm({
       citation: record.case_number || "",
       case_name: record.case_name || "",
@@ -84,7 +86,7 @@ export function PrecedentEditSheet({ caseLawId, onOpenChange }: Props) {
       headnote: record.headnote || "",
       key_quote: (record as { key_quote?: string }).key_quote || "",
     });
-  }, [record]);
+  }
 
   const onSubmit = async (e: React.FormEvent) => {
     e.preventDefault();