UseEffect Dependency Correctness

Side effects must be written with the correct React lifecycle mental model: `useEffect` runs after render/commit, not at the place the code is written. Always include a dependency array and make the effect’s inputs explicit so state resets (e.g., initializing defaults when a dialog opens) happen at the right time and without stale reads.

copy reviewer prompt

Prompt

Reviewer Prompt
Deploy Agent

Side effects must be written with the correct React lifecycle mental model: useEffect runs after render/commit, not at the place the code is written. Always include a dependency array and make the effect’s inputs explicit so state resets (e.g., initializing defaults when a dialog opens) happen at the right time and without stale reads.

Apply this standard:

  • If logic depends on props/state (e.g., visible, defaultValues, formCallbackRef), include them in the useEffect dependency list.
  • Perform “reset when dialog opens” inside an effect keyed to the open/visible flag rather than relying on render-order.

Example (dialog reset):

useEffect(() => {
  const initialDeleteValue = chunk_num > 0;
  setDefaultValues({ delete: initialDeleteValue, apply_kb: false });

  if (visible && formCallbackRef.current) {
    formCallbackRef.current.reset({ delete: initialDeleteValue, apply_kb: false });
  }
}, [visible, chunk_num, setDefaultValues]);

Also: extract repeated side-effect logic into hooks when appropriate (to avoid duplicated effect code), but keep each hook’s effect dependencies correct.

Source discussions