useEffect React hook, how to use
Find out what the useEffect React hook is useful for, and how to work with it!
Check out my React hooks introduction first, if you’re new to them.
One React hook I use a lot is useEffect
.
import React, { useEffect } from 'react'
The useEffect
function runs when the component is first rendered, and on every subsequent re-render/update.
React first updates the DOM, then calls the function passed to useEffect()
.
Example:
const { useEffect, useState } = React
const CounterWithNameAndSideEffect = () => {
const [count, setCount] = useState(0)
const [name, setName] = useState('Flavio')
useEffect(() => {
console.log(`Hi ${name} you clicked ${count} times`)
})
return (
<div>
<p>
Hi {name} you clicked {count} times
</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
<button onClick={() => setName(name === 'Flavio' ? 'Roger' : 'Flavio')}>
Change name
</button>
</div>
)
}
TIP: if you’re an old-time React dev and you’re used to
componentDidMount
,componentWillUnmount
andcomponentDidUpdate
events, this replaces those.
You can optionally return a function from the function you pass to useEffect()
:
useEffect(() => {
console.log(`Hi ${name} you clicked ${count} times`)
return () => {
console.log(`Unmounted`)
}
})
The code included in that function you return will execute when the component is unmounted.
You can use this for any “cleanup” you need to do.
For old timers, this is like
componentWillUnmount
useEffect()
can be called multiple times, which is nice to separate unrelated logic.
Since the useEffect()
functions are run on every subsequent re-render/update, we can tell React to skip executing the function, for performance purposes, by adding a second parameter which is an array that contains a list of state variables to watch for.
React will only re-run the side effect if one of the items in this array changes.
useEffect(
() => {
console.log(`Hi ${name} you clicked ${count} times`)
},
[name, count]
)
Similarly you can tell React to only execute the side effect once (at mount time), by passing an empty array:
useEffect(() => {
console.log(`Component mounted`)
}, [])
This ☝️ is something I use all the time.
Example on Codepen:
See the Pen React Hooks example #3 side effects by Flavio Copes (@flaviocopes) on CodePen.
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025