Avoiding Bugs with useEffect Dependencies in React

The Problem: React Checks Object References, Not Values

React’s useEffect dependencies array doesn’t check what's inside the object (like its properties). Instead, it only checks the reference of the object.

In JavaScript, even if two objects have the same properties and values, they’re considered different if their references don’t match. So, if you create a new object during each render, React will see it as “changed,” and your useEffect will run every time.

Example of the Bug

function MyComponent({ data }) {
  const someObject = { key: data }; // New object created on every render
useEffect(() => {
    console.log("Effect ran!");
  }, [someObject]); // Effect runs every time because `someObject` is new
  return <div>{data}</div>;
}        

Here, someObject is created fresh on every render, so its reference is always new. This causes useEffect to run every time, even if data hasn’t changed.

How to Fix It

1. Use Primitive Values in Dependencies

Instead of passing the whole object, use specific primitive values (like numbers or strings) that don’t create new references on every render.

function MyComponent({ data }) {
  useEffect(() => {
    console.log("Effect ran!");
  }, [data]); // Use `data` directly
return <div>{data}</div>;
}        

2. Memoize Objects with useMemo

If you must use an object, you can ensure it keeps the same reference between renders using React.useMemo.

function MyComponent({ data }) {
  const someObject = React.useMemo(() => ({ key: data }), [data]);
useEffect(() => {
    console.log("Effect ran!");
  }, [someObject]); // Runs only when `data` changes
  return <div>{data}</div>;
}        

3. Avoid Overcomplication

Whenever possible, avoid creating unnecessary objects in your component. This not only prevents dependency bugs but also keeps your code simple and readable.

Key Takeaway

To avoid unexpected re-renders or infinite loops:

• Use primitive values in the useEffect dependencies array.
• Memoize objects or arrays if they must be dependencies.
• Keep your dependency list simple and focus on what really changes.

React is powerful but can sometimes feel tricky. Understanding how dependencies work makes your code more predictable — and saves you hours of debugging!

Got any tricks for managing useEffect? Share them below! ??