How to fix useCallback received a final argument of type `object` instead of an array in React

// ❌ Wrong - passing an object
const callback = useCallback(() => {
  // function code
}, { dependency: value });

// ❌ Wrong - passing a boolean
const callback = useCallback(() => {
  // function code
}, true);

// ❌ Wrong - missing brackets
const callback = useCallback(() => {
  // function code
}, dependency);

// ✅ Correct - empty array
const callback = useCallback(() => {
  // function code
}, []);

// ✅ Correct - array with dependencies
const callback = useCallback(() => {
  console.log(value);
}, [value]);

// ✅ Correct - multiple dependencies
const callback = useCallback(() => {
  doSomething(prop1, prop2);
}, [prop1, prop2]);

function MyComponent({ userId, onComplete }) {
  const [count, setCount] = useState(0);
  const apiUrl = '/api/users';

  // All reactive values must be in the dependency array
  const handleSubmit = useCallback(() => {
    fetch(`${apiUrl}/${userId}`)
      .then(() => {
        setCount(c => c + 1); // setCount is stable, doesn't need to be included
        onComplete();
      });
  }, [userId, onComplete, apiUrl]); // Include all referenced values

  return <button onClick={handleSubmit}>Submit</button>;
}

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

module.exports = {
  plugins: ['react-hooks'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn'
  }
};

import { useCallback, useState } from 'react';

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

  const handleClick = useCallback(() => {
    console.log('Current count:', count);
    setCount(count + 1);
  }, [count]); // Callback will update when count changes

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

const MemoizedChild = React.memo(ChildComponent);

function Parent() {
  const handleClick = useCallback(() => {
    // Without useCallback, MemoizedChild re-renders unnecessarily
  }, []);

  return <MemoizedChild onClick={handleClick} />;
}

const fetchData = useCallback(() => {
  return fetch('/api/data');
}, []);

useEffect(() => {
  fetchData(); // Stable reference prevents effect from running repeatedly
}, [fetchData]);