useEffect, using the Effect Hook in React
In previous articles, we have talked about the different frameworks that exist, their differences, and their advantages. Today we are going to talk about a React Hook that surely all developers know, useEffect().
What is useEffect?
Any developer who has worked with recent versions of React will have come across the useEffect() hook.
This Hook is one of the most useful tools that React offers us to create an interface capable of reacting to changes that occur in our application.
Its use is relatively easy to explain: useEffect is executed when the component is mounted, each time some part of the component’s state changes, and finally when the component is unmounted.
One of the keys to using useEffect correctly is to prevent it from running with every render. Since, by default, all of our component’s useEffect hooks will be executed every time the component is updated. Let’s see how to avoid it, but first, let’s learn a little more about this very useful Hook.
What does useEffect do?
The first thing to know is how it works. It’s important to know that by using this Hook, we’re telling React that the component needs to do something after rendering.
React will remember the function we’ve passed to it (we’ll refer to it as our “effect”), and will call it later after updating the DOM.
Why is useEffect called inside the component?
Using useEffect inside the component allows us to access the state variable count (or any prop.) directly from the effect.
This makes the process easier as we don’t need a special API to access it as it is in the function scope. Hooks take advantage of JavaScript closures and avoid introducing React-specific APIs where JavaScript already provides a solution.
How to avoid execution on every render?
As we discussed earlier, by default UseEffect runs after the first render and after every update. We will explain how to modify this behavior.
UseEffect, has a second optional parameter in which we can define what are the changes in the state that we want the function to execute. We introduce these changes as an array with the variables with which we want to execute.
To keep this example simple and clear, we will only change the document title when the count state variable changes, and not on every render.
It is possible to add multiple variables to this array. But it is highly recommended to try to keep the dependencies of each useEffect to a minimum. This will help us avoid errors and unwanted executions when developing.
Using return to avoid memory leaks
A common use case for useEffect is to make asynchronous calls or subscriptions to event listeners. These use cases are often prone to errors if the hook is not used correctly.
For its part, React provides us with a return function within useEffect with which we can clean up subscriptions or asynchronous calls when the component is unmounted.
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
}, [props.friend.id]); // Only re-subscribe if props.friend.id changesThis is an example where we can see how the callback function is used to unsubscribe the component from an API to avoid a memory leak.
Is it recommended to use useEffect in React?
As we explained at the beginning of the article, UseEffect is one of the most commonly used React hooks and allows the development team to do a lot of things.
That is why we must be very strict when defining its use and operation cases, since misuse of this hook can lead to countless bugs that are difficult to identify and solve, unexpected behavior in our components, and, above all, a waste of resources. and time for our team, avoidable and unnecessary.
If you want to continue expanding your knowledge about this Hook, here is a link to the official documentation.