What is React Hooks?
Hooks are functions that let you use the React state and lifecycle events in a functional component. Hooks won't work inside classes. They came into existence to solve many problems created by the class-based components. In class, it was hard to reuse stateful logic between components. But in function, hooks allow us to reuse stateful logic without changing the component hierarchy.
There are many Hooks. Two of the most commonly used are State Hook and Effect Hook. In this post, we will be taking a look at the Effect Hook.
What is Effect Hook?
If you have used class-based components in react then you might be knowing about the Lifecycle events like componentDidMount, componentDidUpdate, and componentWillUnmount. The Effect Hook, useEffect, serves the same purpose as these but unified into a single API.
How to use Effect Hook?
Now we will be using the mighty Effect Hook.
importing useEffect
import React, { useEffect } from 'react';
Calling on every render
This function will be called on every render of the component.
useEffect(function callMeEveryRender(){
});
Calling on Mount
This function will be called when the component will be mounted.
useEffect(function callMeOnMount(){
}, []);
Calling when value changes
This function will be called when the value count changes.
useEffect(function callMeOnCountChanges(){
},[count]);
Calling and Cleaning up on every render
This function will be called on every render of the component and perform the cleanup.
useEffect(function callMeAndCleanupEveryRender(){
return function foo(){
}
});
Calling on Mount and cleanup before Unmount
This function will be called when the component will be mounted and perform the cleanup before the component gets unmounted.
useEffect(function callMeOnMountAndCleanupBeforeUnmount(){
return function foo(){
}
},[]);
Some rules of useEffect
- Don’t call Hooks inside loops, conditions, or nested functions. Only call Hooks at the top level.
- Don’t call Hooks from regular JavaScript functions. Only call Hooks from React function components.
And don't break the rules, if you will then you will be in great trouble and may get into infinity loops.
Conclusion
We have seen how to use useEffect in a React Function Component
I hope this helped you with understanding useEffect!
Thanks for reading!
Happy Coding!
