// BAD: Creates new reference every render -> infinite loop
function WizardStep() {
  const { watch } = useForm();
  const values = watch(); // Called in render body!

  useEffect(() => {
    save(values);
  }, [values]); // values is new object every render -> loop
}

// GOOD: Subscription-based watch
function WizardStep() {
  const { watch } = useForm();

  useEffect(() => {
    const subscription = watch((data) => {
      debouncedSave(data);
    });
    return () => subscription.unsubscribe();
  }, [watch]); // watch is stable
}

import { useForm } from 'react-hook-form';
import { useMutation } from '@tanstack/react-query';
import { useCallback, useEffect, useRef } from 'react';
import { debounce } from 'lodash-es';

function useAutosave<T>(fundId: string) {
  const { watch, formState: { isDirty } } = useForm<T>();

  const { mutate } = useMutation({
    mutationFn: (data: T) => saveFund(fundId, data),
  });

  // Stable debounced save function
  const debouncedSave = useRef(
    debounce((data: T) => {
      mutate(data);
    }, 1000)
  ).current;

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      debouncedSave.cancel();
    };
  }, [debouncedSave]);

  // Subscription-based watch
  useEffect(() => {
    const subscription = watch((data) => {
      if (isDirty) {
        debouncedSave(data as T);
      }
    });
    return () => subscription.unsubscribe();
  }, [watch, isDirty, debouncedSave]);
}

function useFundForm(fundId: string) {
  const queryClient = useQueryClient();

  const { data: serverData, isLoading } = useQuery({
    queryKey: ['fund', fundId],
    queryFn: () => fetchFund(fundId),
    staleTime: Infinity, // Don't refetch while editing
  });

  const form = useForm({
    defaultValues: serverData,
  });

  // Save mutation with optimistic cache update
  const { mutate: save, isPending } = useMutation({
    mutationFn: (data: FundData) => saveFund(fundId, data),
    onSuccess: (savedData) => {
      // Update cache without triggering refetch
      queryClient.setQueryData(['fund', fundId], savedData);
    },
  });

  return { form, save, isLoading, isSaving: isPending };
}

// DANGER ZONE: These can cause loops

// 1. Invalidating the same query you're watching
onSuccess: () => queryClient.invalidateQueries(['fund', fundId])

// 2. Refetching on window focus while form is dirty
useQuery({ refetchOnWindowFocus: true })

// 3. Background refetch intervals
useQuery({ refetchInterval: 30000 })


// SAFE PATTERNS

// 1. Direct cache update, no refetch
onSuccess: (data) => queryClient.setQueryData(['fund', fundId], data)

// 2. Disable refetch while editing
useQuery({
  refetchOnWindowFocus: false,
  refetchOnReconnect: false,
  staleTime: Infinity,
})