Understanding React useEffect hook's Dependency
Kadiri Talitu (Coded Salis)
Posted on February 3, 2023
The useEffect
hook in react can be quite confusing especially when you're still new to the library trying to understand the bits that holds it together.
According to the React documentation, useEffect is a React Hook that lets you synchronize a component with an external system and it's syntax is:
useEffect(setup, dependencies?)
setup
is a callback function where you define your logic and dependencies?
is an optional array of variables you can pass to the effect that determines how often the code in the setup callback function will be executed.
Here are some behaviours of the useEffect hook given the different scenarios
1. Empty dependencies array
useEffect(() => {
//
}, [])
Leaving the dependency arrays empty as shown in the example above will make sure that the code in the setup
callback function will be executed only once, that is, when the component is mounted.
2. No dependencies array passed
useEffect(() => {
//
})
When you do not pass any dependency array to the useEffect hook as in the example above, the code in the setup
callback function will be executed every time the component renders or after every re-render
3. Passing a variable name to the dependency
useEffect(() => {
//
}, [var1, var2]);
Passing a variable name or list of variable names eg: var1
, var2
, etc inside the array means that the code in the setup
callback function will be executed every time the state of that variable changes. For example, in the code below, the code in the setup callback function will be executed each time the counter is incremented
import React, { useEffect, useState } from 'react'
export function App() {
const [counter, setCounter] = useState(0)
useEffect(() => {
console.log('effect code executed')
}, [counter])
return (
<div>
<p>Counter: { counter }</p>
<button onClick={()=> setCounter(counter+1)}>
Increment me!
</button>
</div>
)
}
Thank you for taking the time to read through it. I hope you enjoyed learning as much as I enjoyed preparing it and if you have any thoughts or comments, please feel free to share them in the comments section.
Posted on February 3, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.