How to fix useCallback was passed a second argument as an object when an array was expected in React

// WRONG - using object syntax
const memoizedCallback = useCallback(() => {
  doSomething(value);
}, { value }); // ❌ Object instead of array

// WRONG - empty object
const memoizedCallback = useCallback(() => {
  doSomething();
}, {}); // ❌ Empty object instead of empty array

// CORRECT - using array syntax
const memoizedCallback = useCallback(() => {
  doSomething(value);
}, [value]); // ✅ Array with dependency

// CORRECT - empty dependency array
const memoizedCallback = useCallback(() => {
  doSomething();
}, []); // ✅ Empty array

function MyComponent({ userId, onUpdate }) {
  const [count, setCount] = useState(0);

  // Include all external values the callback references
  const handleClick = useCallback(() => {
    console.log('User:', userId, 'Count:', count);
    onUpdate(userId, count);
  }, [userId, count, onUpdate]); // ✅ All dependencies listed

  return <button onClick={handleClick}>Click me</button>;
}

// OPTION 1: Depend on specific object properties
const handleUpdate = useCallback(() => {
  updateUser(user.id, user.name);
}, [user.id, user.name]); // ✅ Specific properties, not entire object

// OPTION 2: Memoize the object first
const stableConfig = useMemo(() => ({
  timeout: 1000,
  retries: 3
}), []); // Memoize object

const processData = useCallback(() => {
  fetchData(stableConfig);
}, [stableConfig]); // ✅ Stable object reference

npm install eslint-plugin-react-hooks --save-dev

{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

function TestComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Callback executed');
  }, []); // Empty array - never recreated

  // This ref will track callback identity
  const callbackRef = useRef(handleClick);

  useEffect(() => {
    if (callbackRef.current !== handleClick) {
      console.log('Callback changed'); // Should not log if dependencies unchanged
    }
    callbackRef.current = handleClick;
  }, [handleClick]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Re-render</button>
      <ChildComponent onAction={handleClick} />
    </div>
  );
}