Something about React
React is a javascript library for building user interfaces. React makes it easy to build apps with reusable components. Components are reusable pieces of UI with their own logic. This makes it easy to structure and divide UI components of the interface and use them. Multiple components form what we see as a beautiful and reactive web application.
Components and how to create them
We can create components in 2 ways, either using a class or a function. With the simplicity and rise of functional programming, React and us developers are adapting to using functional components.
Since React 16, react introduced something called hooks to manage states in our components. React has provided us with many hooks for different use cases to manage states, handle side effects, improve performance and create references. React also introduces the creation of custom hooks designed by you for the purpose set by you. Pretty amazing.
This article will focus on one widely used hook for handling side effects useEffect hook.
The effect of using useEffect
A component is used to render something on the UI. This something may include logic and many factors may affect the rendering logic and the state of the UI. The useEffect hook specifically is designed to deal with the side effects part of the rendering logic.
What are side effects you ask?
A side effect in simple terms is an effect (read programming logic) that is isolated from direct rendering but can change one or several states inside the component and hence the UI. For example, making an API call and rendering the result as a list on the UI. Before diving deep into how to use it and lifecycle management, let's take a look at what useEffect hook syntax looks like.
useEffect(callbackFn, [dependencyArray]);
useEffect takes 2 arguments
callbackFn -> A callback function that is executed everytime a dependency in the second argument changes.
dependencyArray -> (Optional) Values inside this array ensure that when they are changed, the above callback is run again and the component is re-rendered.
The callback function we pass is used to handle the side effect. By default, if no second argument is passed it runs on every render of the component. This is where the dependency array is used to control unnecessary re-renders of the component.
useEffect and lifecycle management
Now that we've learned about useEffect and its effects. Let's dive a bit deep into how it can be used for lifecycle management for functional components.
Lifecycle management
React components have lifecycles of their own. They go through several stages like the human lifecycle to compare.
React components w.r.t to their lifecycles have 3 stages :
- componentDidMount() -> Invoked when the component is being inserted into the DOM
- componentDidUpdate() -> Invoked immediately after a component is updated
- componentWillUnmount() -> Invoked before a component is unmounted
These 3 lifecycle functions are used in Class-based components to manage and clean up components w.r.t to their lifecycle stage.
With the introduction of Functional programming and functional components, developers needed a new way to perform their lifecycle actions.
useEffect to manage lifecycle
Now we know that useEffect without a dependency array runs at every render. We can play with the second argument to make it run on specific lifecycle stages.
componentDidMount() equivalent useEffect
useEffect(() => {
//Invoked right after the component is mounted
}, []);
When using useEffect with an empty dependency array. The callbackFn is executed once and only once after the component is mounted. So any logic/side effect needed to run only once after a component is mounted can go here.
Example: A GET API request to get some data.
componentDidUpdate() equivalent useEffect
useEffect(() => {
//Invoked everytime something in the dependency array changes
}, [someVar1, someState2])
When using useEffect with some values in the dependency array. The function is invoked everytime the values of dependency array changes/updates.
componentWillUnmount() equivalent useEffect
useEffect(() => {
return () => {
// Invoked when component is removed/unmounted
}
}, [])
When using useEffect to cleanup on component unmount we need to return a function from inside the hook. This returned function will run when the component is unmounted/removed.
Note: If the dependency array is not empty, the cleanup function will run at every re-render.
Thank you for taking the time to read this article. If you find this useful in your React development journey, leave a ❤️ in the comments with your suggestions.