DEV Community

Cover image for Why useeffect is running twice in react
MD. JAHID HOSSAIN
MD. JAHID HOSSAIN

Posted on • Updated on

Why useeffect is running twice in react

The useEffect hook allows you to perform side effects in your React components. It takes a callback function as its first argument, which is called whenever the component is updated. The second argument is an array of dependencies, which is a list of values that the effect depends on. When any of these dependencies change, the effect is re-run. If the array is omitted or is empty, the effect will run on every render.

In React, the useEffect hook is called multiple times because it is designed to re-run whenever certain values (referred to as "dependencies") change.

Here are a few reasons why an useEffect might be called twice:

  • Missing dependencies: If you forget to include all of the values that the effect depends on, it will run twice. This is because it will re-run on every render, not just the ones where the data actually changed.
  • Changing state inside the effect: If you change the state inside an effect, it will cause a re-render, which will then cause the effect to re-run. To avoid this, make sure to wrap state updates inside a useState or useReducer call.
  • Async updates: If you're updating state asynchronously (for example, in a setTimeout), the state may change after the effect has already run, causing the effect to re-run on the next render.

If you want to prevent your useEffect from running twice, make sure to list all of its dependencies correctly and avoid changing state inside the effect.

Here's an example of an useEffect that causes unnecessary re-renders because of missing dependencies:

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');

  useEffect(() => {
    console.log(`The count is ${count}`);
  });

  return (
    <div>
      <p>{`The count is ${count}`}</p>
      <button onClick={() => setCount(count + 1)}>Increase count</button>
      <button onClick={() => setName('Jane')}>Change name</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

In this example, the useEffect will run every time the component re-renders, even though the count is the only thing that actually changed. To fix this, we can list count as a dependency of the effect:

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');

  useEffect(() => {
    console.log(`The count is ${count}`);
  }, [count]); // <-- Add the dependency here

  return (
    <div>
      <p>{`The count is ${count}`}</p>
      <button onClick={() => setCount(count + 1)}>Increase count</button>
      <button onClick={() => setName('Jane')}>Change name</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

With this change, the useEffect will only run when the count changes, and not every time the component re-renders.

When using the useEffect hook with an array of dependencies, you can use the useRef hook to avoid unnecessary re-renders in some cases.

For example, if you have an effect that depends on some values that don't change during the lifetime of your component, you can use a ref to store these values and exclude them from the list of dependencies. This way, the effect will only re-run when the values that actually matter change.

Here's an example:

import React, { useState, useEffect, useRef } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('Hello');
  const countRef = useRef(count);

  useEffect(() => {
    console.log(`The count is ${countRef.current}`);
    document.title = `Count: ${countRef.current}`;
  }, [countRef]);

  return (
    <div>
      <p>{`The count is ${count}`}</p>
      <p>{`The text is ${text}`}</p>
      <button onClick={() => setCount(count + 1)}>Increase count</button>
      <button onClick={() => setText('Hello again')}>Change text</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

In this example, we're using a ref to store the value of count so that we can use it in the useEffect hook. Since the ref is not a state value, updating it will not trigger a re-render, and the effect will only re-run when the value of count actually changes.

It's important to note that while useRef can help you avoid unnecessary re-renders, it should be used carefully. Overusing useRef can lead to complex and hard-to-debug code, so it's usually best to use state variables when possible.

Top comments (7)

Collapse
 
brense profile image
Rense Bakker

Its worth noting that in React 18 when you run in dev mode with React.StrictMode on. Your useEffect hook will always run atleast twice because your component is mounted twice.

Collapse
 
jahid6597 profile image
MD. JAHID HOSSAIN

Yes, when using React.StrictMode in development, your components will be rendered twice, causing useEffect hooks to run twice. This can cause unexpected behavior and should be taken into consideration when writing your code. However, this behavior is specific to development and will not occur in production.

Collapse
 
brense profile image
Rense Bakker

Indeed, its a good test to see if your useEffect hooks do something bad, like not cleanup subscriptions or event listeners.

Thread Thread
 
jahid6597 profile image
MD. JAHID HOSSAIN

Using useEffect in React requires proper cleanup to avoid memory leaks and unexpected behavior. This can be achieved by returning a cleanup function in the useEffect callback, which is executed by React when the component is unmounted. The cleanup function should also include any necessary cleanup procedures for external libraries, such as event listeners or subscriptions.

import React, { useEffect, useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => 
        setCount(c => c + 1), 
    1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>{count}</div>
  );
}
Enter fullscreen mode Exit fullscreen mode

In this example, the useEffect hook sets up an interval that increments the count in every second, and returns a cleanup function that clears the interval when the component is unmounted. This ensures that the interval is not still running and affecting performance or causing memory leaks when the component is no longer in use.

Collapse
 
elias102 profile image
Elias

Thanks for this good note ❤️

Collapse
 
cestabhi profile image
Abhishek Mhatre

Thanks. I finally figured out why it was running twice.

Collapse
 
jahid6597 profile image
MD. JAHID HOSSAIN

glad to know ❤️