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

// Wrong - passing an object directly
useEffect(() => {
  fetchData();
}, { userId, limit }); // Object instead of array

// Wrong - object literal without array
useEffect(() => {
  updateTitle();
}, config); // config is an object

// Wrong - using curly braces instead of square brackets
useEffect(() => {
  console.log('Effect runs');
}, { userId }); // Curly braces create object

// Correct - single dependency in array
useEffect(() => {
  fetchData();
}, [userId]);

// Correct - multiple dependencies in array
useEffect(() => {
  updateTitle();
}, [userId, limit]);

// Correct - empty array for no dependencies
useEffect(() => {
  initialize();
}, []);

// Correct - object properties as separate dependencies
useEffect(() => {
  fetchData();
}, [config.userId, config.limit]); // Extract properties

function UserComponent({ userId, settings }) {
  // Memoize the config object
  const config = useMemo(() => ({
    userId,
    limit: settings.limit,
    sortBy: settings.sortBy
  }), [userId, settings.limit, settings.sortBy]);

  // Now config can be used as a dependency
  useEffect(() => {
    fetchUserData(config);
  }, [config]); // config reference is stable when dependencies don't change

  return <div>User data</div>;
}

// Instead of passing the entire config object:
useEffect(() => {
  fetchData(config);
}, [config]); // Object reference changes on every render

// Pass the specific primitive values needed:
useEffect(() => {
  fetchData({ userId, limit });
}, [userId, limit]); // Primitives compared by value

// Or extract properties from the object:
const { userId, limit } = config;
useEffect(() => {
  fetchData({ userId, limit });
}, [userId, limit]);

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

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

npm run dev
# or
npm start