How to fix React Hook useRef has a missing dependency. Either include it or remove the dependency array in React

// No dependencies needed - basic DOM ref
const inputRef = useRef<HTMLInputElement>(null);

// No dependencies needed - mutable value
const timeoutId = useRef<NodeJS.Timeout | null>(null);

// Dependencies MAY be needed - ref depends on prop
const computedRef = useRef(expensiveComputation(props.data)); // Warning if props.data not in deps

// Before: Ref initialization depends on prop
const dataRef = useRef(processData(props.items)); // Warning: missing props.items

// After: Initialize empty, update in useEffect
const dataRef = useRef<ProcessedData | null>(null);

useEffect(() => {
  dataRef.current = processData(props.items);
}, [props.items]); // Proper dependency tracking in useEffect

// Before: Trying to compute ref value with dependencies
const computedValue = useRef(expensiveCalculation(props.a, props.b));
// Warning: missing props.a, props.b

// After: Use useMemo for computed values
const computedValue = useMemo(
  () => expensiveCalculation(props.a, props.b),
  [props.a, props.b]
);

// If you still need a ref to this value (for mutation):
const computedRef = useRef(computedValue);
useEffect(() => {
  computedRef.current = computedValue;
}, [computedValue]);

// Custom hook with useRef and dependencies
function usePrevious<T>(value: T): T | undefined {
  const ref = useRef<T>();

  useEffect(() => {
    ref.current = value;
  }, [value]); // Dependency properly tracked in useEffect

  return ref.current;
}

// Usage - no warnings
const previousCount = usePrevious(count);

// Wrong pattern: Recreating ref on dependency change
const [items, setItems] = useState([]);
const itemsRef = useRef(items); // Warning, but also wrong pattern

// Better: Store current value separately
const [items, setItems] = useState([]);
const itemsRef = useRef();

useEffect(() => {
  itemsRef.current = items;
}, [items]);

// Or even better: Do you need a ref at all?
// Often, state or a derived value is sufficient

// This ref is for a DOM element, not dependent on props
const inputRef = useRef<HTMLInputElement>(null); // No warning usually

// If you get a false warning in a complex case:
const stableRef = useRef({
  // Complex initialization that ESLint misinterprets
  initialize() { /* ... */ }
  // eslint-disable-next-line react-hooks/exhaustive-deps
}); // Intentionally empty despite complex init