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
oruseReducer
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>
);
}
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>
);
}
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>
);
}
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)
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.Yes, when using
React.StrictMode
in development, your components will be rendered twice, causinguseEffect
hooks to run twice. This can cause unexpected behavior and should be taken into consideration when writing your code. However, this behavior is specific todevelopment
and will not occur inproduction
.Indeed, its a good test to see if your useEffect hooks do something bad, like not cleanup subscriptions or event listeners.
Using
useEffect
in React requires proper cleanup to avoid memory leaks and unexpected behavior. This can be achieved by returning a cleanup function in theuseEffect
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.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.Thanks for this good note ❤️
Thanks. I finally figured out why it was running twice.
glad to know ❤️