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

Read the console warning to see which hook call triggered the message. The stack trace usually points to a component file and line number, and the warning text shows the value passed to useEffect.

Look for code such as:

useEffect(() => {
  fetchData();
}, { userId }); // ❌ object instead of array

useEffect(() => {
  console.log(props);
}, props); // ❌ passing props directly instead of [props]

Any non-array second argument is invalid and will trigger the warning.

Change the second argument to square brackets and list every value from the component scope that the effect relies on.

// ✔️ empty dependency array runs only once
useEffect(() => {
  sendAnalytics();
}, []);

// ✔️ array with dependencies
useEffect(() => {
  fetchData(userId);
}, [userId]);

// ✔️ multiple dependencies
useEffect(() => {
  updateChart(data, theme);
}, [data, theme]);

If you actually want the effect to run on every render, simply omit the second parameter entirely instead of passing an object.

Objects and arrays are reference types, so creating a new object inside render produces a new reference on every render even if the content does not change. Instead of listing the raw object as a dependency, either memoize it with the primitive values it depends on (useMemo with those primitives) or destructure those primitives directly and list them individually (for example, [filters.status, filters.sort]).

This keeps useEffect happy and avoids passing an object directly, because React compares each dependency with Object.is and will re-run the effect whenever a reference changes.

Add eslint-plugin-react-hooks if it is missing so you catch dependency array mistakes automatically.

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

In your ESLint config:

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

The exhaustive-deps rule enforces that the second argument is an array and that it lists the right values, preventing this warning before you even run the app.

Run the app locally and observe the console to make sure the warning disappears. Reload the component with the relevant props/state so the effect runs and confirm:

- The warning no longer appears.
- The effect only runs when listed dependencies change.
- Child components no longer re-render unnecessarily.

npm run dev
# or
npm start

Use React DevTools to inspect renders if you still suspect unnecessary executions.