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

What this error means

The useEffect hook in React is designed to run side effects after render. Its second parameter is a dependency array that tells React when to re-run the effect based on changes to the listed values. When you accidentally pass an object instead of an array, React can't properly track dependencies, leading to unexpected behavior. React compares dependency values using Object.is() for equality checking. When you pass an object as the second argument, React sees it as a single dependency that changes reference on every render (since objects are compared by reference, not by value). This causes the effect to run on every render, potentially creating infinite loops or performance issues. The error message specifically mentions receiving an "object" type, but this warning can also appear for other non-array types like numbers, booleans, or strings passed as the second argument.

Typical symptoms

• Console warning: "useEffect received a final argument of type `object` instead of an array"
• Effect runs on every render regardless of dependency changes
• Infinite re-render loops in your component
• ESLint warnings about missing or incorrect dependencies
• The effect doesn't run when expected dependencies change
• Performance degradation due to unnecessary effect executions
• React development build displays the warning in browser console

Common causes

1. Passing an object literal directly in the dependency position without wrapping it in an array
2. Forgetting to wrap dependencies in square brackets
3. Using object destructuring incorrectly in the dependency array
4. Confusing the useEffect signature with other hooks like useMemo or useCallback
5. Copying code from examples that use objects for configuration
6. Attempting to pass configuration options as an object instead of using the dependency array
7. Syntax error where curly braces are used instead of square brackets

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

// 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

Advanced notes

Frequently asked questions

What does "useEffect received a final argument of type `object` instead of an arr" mean?

The useEffect hook in React is designed to run side effects after render. Its second parameter is a dependency array that tells React when to re-run the effect based on changes to the listed values. When you accidentally pass an object instead of an array, React can't properly track dependencies, leading to unexpected behavior.

How do I fix "useEffect received a final argument of type `object` instead of an arr"?

This error occurs when you pass an object as the second argument to React's useEffect hook instead of an array of dependencies. The useEffect hook expects its dependencies to be in an array format for proper comparison between renders. This mistake often leads to infinite re-renders or the effect not running when expected.

What causes "useEffect received a final argument of type `object` instead of an arr"?

Passing an object literal directly in the dependency position without wrapping it in an array Forgetting to wrap dependencies in square brackets Using object destructuring incorrectly in the dependency array

Is the "useEffect received a final argument of type `object` instead of an arr" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• Warning: useEffect received a final argument that is not an array (instead, received `[type]`). When specified, the final argument must be an array.

  How to fix "useEffect invalid second argument" in React

  MEDIUM

• useDeferredValue is not available in this React build

  How to fix "useDeferredValue is not available in this React build" in React

  MEDIUM

• React Hook useEffect has missing dependencies: 'count'. Either include it or remove the dependency array.

  How to fix "React Hook useEffect has a missing dependency" in React

  MEDIUM

• useContext must be called inside a function component

  How to fix "useContext must be called inside a function component" in React

  MEDIUM

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation
• 📖
  Official: useEffect Hook Reference(Official Docs)
• 📖
  Official: Removing Effect Dependencies(Official Docs)
• Ben Ilegbodu: Object & array dependencies in useEffect
• FreeCodeCamp: Most common useEffect problems
• LogRocket: 15 common useEffect mistakes to avoid