This content originally appeared on DEV Community and was authored by Rajshekhar Yadav
What Are Hooks
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
What is useEffect
If you have been working with class component you would have performed side effects in your component like updating Ui, fetching data from api or subscribing to any changes. Since the render method is too early to perform side effects we have lifecycle method in class component.
- ComponentDidMount
- ComponentDidUpdate
- ComponentWillUnmount
You must have been concerned about how useEffect would handle all of this. Let's get started without further ado.
How to use useEffect
UseEffect accept two arguments:
- Callback: It is a function where we put write the side - effect logics.
- Dependency : It is an optional array of dependency. Callback function got executed whenever these dependency changes.
useEffect(() => {
//Callback
}, [dependencies]);
Let's have a look at all of the scenarios with some examples:
- When the dependency is not provided: This side-effect runs after every rendering.
useEffect(() => {
console.log('App.js: useEffect');
});
return (
<SafeAreaView style={backgroundStyle}>
<View>
<Text style={styles.sectionTitle}>Hi There {count} times</Text>
<Button
title="Press me"
onPress={() => {
setCount(count + 1);
}}
/>
</View>
</SafeAreaView>
);
If we check at the logs, we can see that the side-effect is called whenever the count changes.
LOG App.js: useEffect
LOG App.js: useEffect
LOG App.js: useEffect
LOG App.js: useEffect
- When the dependency array is empty: This side-effect will call first time only.
useEffect(() => {
console.log('App.js: useEffect');
}, []);
If we look into logs, side-effect got called only one time
LOG Click Me
LOG Click Me
LOG Click Me
LOG Click Me
When configured in such a way, the useEffect() executes the callback just once, after initial mounting. We can say it will work like componentDidMount()
- When the dependency array have some parameter: This side-effect runs whenever the parameter changes .
const [count, setCount] = React.useState(0);
const [countDown, setCountDown] = React.useState(100);
useEffect(() => {
console.log('App.js: useEffect');
}, [count]);
return (
<SafeAreaView style={{flex:1}}>
<View>
<Text style={styles.sectionTitle}>Hi There {count} times</Text>
<Text style={styles.sectionTitle}>Time is ticking {countDown}</Text>
<Button
title="Increment"
onPress={() => {
console.log('Increment Count');
setCount(count + 1);
}}
/>
<Button
title="Decrement"
onPress={() => {
console.log('Decrement Count');
setCountDown(countDown - 1);
}}
/>
</View>
</SafeAreaView>
);
If you closely look into console, You will find whenever the value of count changes, useEffect got called only then.
LOG App.js: useEffect
LOG Decrement Count
LOG Decrement Count
LOG Decrement Count
LOG Decrement Count
LOG Increment Count
LOG App.js: useEffect
LOG Increment Count
LOG App.js: useEffect
LOG Increment Count
LOG App.js: useEffect
So you can see it will work the same way like ComponentDidUpdate work in class component
Now you must be thinking, what about side-effect cleanup? Class component has a separate method to deal with it.
- Side-Effect Cleanup
Some side effects need a cleanup, like canceling any api call while un-mounting, closing connection or clearing timers.
We can achieve this by returning a cleanup function from
useEffect() callback
useEffect(() => {
// This is your side-effect logic
return function cleanup() {
// Side-effect cleanup
};
},[dependencies]);
Cleanup works in following way:
- While mounting the component,
useEffect()invokes the callback having the side-effect.cleanupfunction is not called. - On later renderings, before invoking the next side-effect callback, useEffect() invokes the cleanup function from the previous side-effect execution, then runs the current side-effect.
- At the end, after unmounting the component,
useEffect()invokes the cleanup function from the latest side-effect.
Let me show you some basic code to explain:
const [count, setCount] = React.useState(0);
useEffect(() => {
console.log('App.js: useEffect');
return function cleanup() {
console.log('App.js: cleanup');
};
}, [count]);
return (
<SafeAreaView style={{flex: 1}}>
<View>
<Text style={styles.sectionTitle}>Hi There {count} times</Text>
<Button
title="Increment"
onPress={() => {
console.log('Increment Count');
setCount(count + 1);
}}
/>
</View>
</SafeAreaView>
);
If you look into the logs, cleanup function is getting called every time before invoking the next side-effect.
LOG App.js: useEffect
LOG Increment Count
LOG App.js: cleanup
LOG App.js: useEffect
LOG Increment Count
LOG App.js: cleanup
LOG App.js: useEffect
Use case of useEffect()
- Updating Ui whenever the state changes.
-
*When we want to perform any action once, especially when the app mount first time. We can prefer useEffect. *
Let us consider an example , we want to fetch list of newsfeed while loading the newsfeed screen.
const [newsFeed, setNewsFeed] = React.useState([]);
async function fetchNewsFeed() {
const response = await fetch('/employees');
const newsFeedData = await response.json(response);
setNewsFeed(newsFeedData);
}
useEffect(() => { // can not be async
fetchNewsFeed(); // Can invoke async function
}, []);
Conclusion
-
useEffect(callback, dependencies) is the hook that manages the side-effects in functional components.
- Callback argument is a function to put the side-effect logic.
- Dependencies is a list of dependencies of your side-effect: being props or state values.
useEffect(callback, dependencies) invokes the callback after initial mounting, and on later renderings, if any value inside dependencies has changed.
-
useEffect(callback, dependencies) can be used in following ways
- initial mounting(ComponentDidMount),
- Managing state changes (ComponentDidUpdate)
- For side-effect cleanup (ComponentWillUnmount)
Related Link
I hope this post helped you understand the basic idea of useEffect(). Feel free to add your suggestions.
Follow me on Twitter.
Happy coding
This content originally appeared on DEV Community and was authored by Rajshekhar Yadav
Rajshekhar Yadav | Sciencx (2021-12-26T10:09:59+00:00) UseEffect: Is it really Effective?. Retrieved from https://www.scien.cx/2021/12/26/useeffect-is-it-really-effective/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.