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

What this error means

The "useCallback received a final argument of type X instead of an array" error in React occurs when the useCallback hook receives an invalid type for its second argument. The useCallback hook expects exactly two parameters: a callback function and a dependencies array. When you pass a non-array value (like an object, boolean, number, or string) as the second argument, React throws this error. The dependencies array is critical to how useCallback works. React uses this array to determine when to return a new function reference versus the memoized version from the previous render. The array should contain all reactive values (props, state, variables) that are referenced inside the callback function. If the dependency array is omitted or replaced with a non-array value, useCallback cannot perform its memoization correctly. This error typically happens due to simple syntax mistakes, such as accidentally passing an object instead of wrapping values in an array, or confusing useCallback's signature with other hooks that might accept different parameter types.

Typical symptoms

• React application throws "useCallback received a final argument of type X instead of an array" error at runtime
• useCallback hook causes component to crash during render
• TypeScript shows type error on useCallback second parameter
• ESLint warnings about incorrect useCallback usage
• Callback function behavior is unpredictable or causes infinite re-renders
• Console displays error pointing to specific useCallback invocation
• Component fails to mount or update properly when using affected callback

Common causes

1. Passing an object literal as the second argument to useCallback instead of an array
2. Passing a boolean value (true or false) as the second argument
3. Accidentally omitting the square brackets around dependencies
4. Confusing useCallback syntax with other functions that accept objects
5. Passing a single dependency value directly instead of wrapping it in an array
6. Using incorrect JavaScript syntax like useCallback(fn, dep1, dep2) instead of useCallback(fn, [dep1, dep2])
7. Copy-pasting code with incorrect hook signatures
8. Attempting to pass configuration options as a second parameter instead of dependencies

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

// ❌ 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]);

Advanced notes

// ❌ Wrong - object literal creates new reference each render
const callback = useCallback(() => {
  console.log(config);
}, [{ setting: true }]); // Always creates new callback

// ✅ Correct - stable reference
const config = useMemo(() => ({ setting: true }), []);
const callback = useCallback(() => {
  console.log(config);
}, [config]); // Only updates when config reference changes

// ❌ Wrong - conditional hook
if (condition) {
  const callback = useCallback(() => {}, []);
}

// ✅ Correct - hook always called, logic inside is conditional
const callback = useCallback(() => {
  if (condition) {
    // conditional logic here
  }
}, [condition]);

Frequently asked questions

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

The "useCallback received a final argument of type X instead of an array" error in React occurs when the useCallback hook receives an invalid type for its second argument. The useCallback hook expects exactly two parameters: a callback function and a dependencies array. When you pass a non-array value (like an object, boolean, number, or string) as the second argument, React throws this error.

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

This error occurs when useCallback receives a non-array value as its second argument instead of a dependency array. The dependencies parameter must always be an array, even if empty.

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

Passing an object literal as the second argument to useCallback instead of an array Passing a boolean value (true or false) as the second argument Accidentally omitting the square brackets around dependencies

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

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

Related errors

• useCallback: the provided function is invalid

  How to fix "useCallback: the provided function is invalid" in React

  MEDIUM

• Cannot update state on unmounted component. This is a no-op, but it indicates a memory leak

  How to fix 'Cannot update state on unmounted component' in React

  MEDIUM

• React Hook useCallback has a missing dependency. Either include it or remove the dependency array

  How to fix "useCallback missing dependency warning" in React

  MEDIUM

• Warning: A component called useState() or useReducer() whose update was not processed

  How to fix "Warning: A component called useState() or useReducer() whose update was not processed" 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
• 📖
  React: useCallback Reference(Official Docs)
• 💬
  GitHub Issue: useCallback received a final argument(Stack Overflow)
• 💬
  GitHub: React Hook useCallback has a missing dependency(Stack Overflow)
• 📖
  React Legacy Docs: Hooks API Reference(Official Docs)
• Plain English: React Hook useCallback