How to fix useCallback was passed a second argument as an object when an array was expected in React

What this error means

The useCallback hook in React requires exactly two arguments: the callback function to memoize, and an array of dependencies that determines when the callback should be recreated. This error appears when you mistakenly pass a plain object `{}` instead of an array `[]` as the second parameter. While both arrays and objects are technically "objects" in JavaScript, React specifically requires the dependency list to be an array. The hook uses this array to track changes in dependencies using the Object.is comparison algorithm. When you pass an object instead of an array, React cannot properly track dependency changes, and the memoization behavior breaks. This is typically a simple syntax mistake - using curly braces when you meant to use square brackets. The fix is straightforward: replace the object notation with proper array syntax for the dependency list.

Typical symptoms

• Console warning: "useCallback was passed a second argument as an object when an array was expected"
• Callback function not memoizing correctly despite using useCallback
• Component re-renders more frequently than expected
• TypeScript error if using strict typing: "Type object is not assignable to type DependencyList"
• React DevTools shows callback function changing on every render
• Child components receiving the callback re-render unnecessarily
• Performance issues due to excessive callback recreation

Common causes

1. Using curly braces {} instead of square brackets [] for the dependency array
2. Confusion between object literal syntax and array syntax in JavaScript
3. Copy-pasting code that incorrectly formatted the dependencies parameter
4. Mistakenly trying to pass a configuration object as the second parameter
5. Auto-complete or IDE suggestion inserting wrong syntax
6. Mixing up useCallback syntax with other hooks that accept object parameters
7. Refactoring code and accidentally changing brackets to braces
8. Attempting to pass a single object dependency without wrapping it in an array

How to fix "useCallback was passed a second argument as an object when an array was expected"

// WRONG - using object syntax
const memoizedCallback = useCallback(() => {
  doSomething(value);
}, { value }); // ❌ Object instead of array

// WRONG - empty object
const memoizedCallback = useCallback(() => {
  doSomething();
}, {}); // ❌ Empty object instead of empty array

// CORRECT - using array syntax
const memoizedCallback = useCallback(() => {
  doSomething(value);
}, [value]); // ✅ Array with dependency

// CORRECT - empty dependency array
const memoizedCallback = useCallback(() => {
  doSomething();
}, []); // ✅ Empty array

function MyComponent({ userId, onUpdate }) {
  const [count, setCount] = useState(0);

  // Include all external values the callback references
  const handleClick = useCallback(() => {
    console.log('User:', userId, 'Count:', count);
    onUpdate(userId, count);
  }, [userId, count, onUpdate]); // ✅ All dependencies listed

  return <button onClick={handleClick}>Click me</button>;
}

// OPTION 1: Depend on specific object properties
const handleUpdate = useCallback(() => {
  updateUser(user.id, user.name);
}, [user.id, user.name]); // ✅ Specific properties, not entire object

// OPTION 2: Memoize the object first
const stableConfig = useMemo(() => ({
  timeout: 1000,
  retries: 3
}), []); // Memoize object

const processData = useCallback(() => {
  fetchData(stableConfig);
}, [stableConfig]); // ✅ Stable object reference

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

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

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

  const handleClick = useCallback(() => {
    console.log('Callback executed');
  }, []); // Empty array - never recreated

  // This ref will track callback identity
  const callbackRef = useRef(handleClick);

  useEffect(() => {
    if (callbackRef.current !== handleClick) {
      console.log('Callback changed'); // Should not log if dependencies unchanged
    }
    callbackRef.current = handleClick;
  }, [handleClick]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Re-render</button>
      <ChildComponent onAction={handleClick} />
    </div>
  );
}

Advanced notes

Frequently asked questions

What does "useCallback was passed a second argument as an object when an array wa" mean?

The useCallback hook in React requires exactly two arguments: the callback function to memoize, and an array of dependencies that determines when the callback should be recreated. This error appears when you mistakenly pass a plain object {} instead of an array [] as the second parameter. While both arrays and objects are technically "objects" in JavaScript, React specifically requires the dependency list to be an array.

How do I fix "useCallback was passed a second argument as an object when an array wa"?

This error occurs when you accidentally pass an object (using curly braces {}) instead of an array (using square brackets []) as the second argument to useCallback. React requires the dependency list to be an array, not a plain object.

What causes "useCallback was passed a second argument as an object when an array wa"?

Using curly braces {} instead of square brackets [] for the dependency array Confusion between object literal syntax and array syntax in JavaScript Copy-pasting code that incorrectly formatted the dependencies parameter

Is the "useCallback was passed a second argument as an object when an array wa" error serious?

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

Related errors

• The "useContext" hook was not provided a valid context object

  How to fix "useContext invalid context" in React

  HIGH

• useCallback: the dependency array must be an array, not undefined

  How to fix "useCallback: the dependency array must be an array, not undefined" in React

  MEDIUM

• React Hook useEffect has a missing dependency: [context value]. Either include it or remove the dependency array.

  How to fix "useContext missing dependency" 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

• 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 Docs: useCallback API Reference(Official Docs)
• Hygraph: React useCallback Complete Guide
• DhiWise: Solving useCallback Dependency Issues
• CoderPad: Guide to Using React useCallback Hook