Coding

From React Class component to Functional component with hooks

How to use the React.js useEffect() hook?

June 13, 2023 · 3 minutes

React

In the previous episodes we have discovered the React.js useState() hook and we have used it to toggle an element, create a simple counter, build controlled input and controlled form. Feeling a little bit more comfortable with the stateful functional component, start learning the React useEffect() hooks basics! What is this hook for ? How and when to use it?

Could this useEffect hook help us to consume less memory?

Summary

Caution : the useEffect hook must be used inside functional components only!

What is the React useEffect() hook used for?

The useEffect() hook is used to execute (effect) an action at a specific moment of the lifecycle of the components.

It corresponds to the React class ComponentDidMount and ComponentDidUpdate lifecycle methods.

Using useEffect, React guarantees the DOM has been updated by the time it runs the effects.

UseEffect allows us to trigger a function only when we need this function to be triggered, the calculation to be done once again. For example, we needn’t to fetch data, read from local storage, interact with browser’s API (using document or window ), register and deregister event listeners… every time the component is rendered. So, using the useEffect hook give the possibility to fetch data only the first time the component is rendered or when the URL changes!

How to insert the useEffect hook in component?

Remark: To use it, we must import the useEffect hook at the top of the file, the same way we do for the useState hook.

import { useState, useEffect } from ‘react’;

Remark: in codepen replace the import by const { useState, useEffect } = React;

Where to place the useEffect React hook in a component?

The useEffect hook must always be placed at the root of the component, above the return.

What is the useEffect hook structure?

The useEffect hook is composed of a callback and an array of dependencies. The callback contains the action to be executed; the array of dependencies contains the triggers.

function MyComponent() {

// useState constants

useEffect(() => { // effect }, [ // dependencies ]);

return (

// code

)

};

When to trigger the useEffect hook?

When is the useEffect hook triggered?

The useEffect hook is triggered when the component has been rendered.

Choose when to trigger the useEffect hook

Trigger the useEffect hook at the first component rendering only

To trigger the useEffect hook at the first component rendering only, the array of dependencies must be void!

useEffect(() => { // effect }, []);

Example of use: fetching data at the first rendering only.

Trigger the useEffect hook at the first component rendering and when any dependency is modified

To trigger the useEffect hook at the first component rendering and when any dependency contained in the array is modified, write the dependencies in the array.

useEffect(() => { // effect }, [ // dependencies ]);

Remark: All the triggers written in the array of dependencies must be separated by a comma.

Example of use: fetching data at the first rendering and when the url changes if the url is written in the array of dependencies.

Trigger the useEffect hook at the first rendering and every time the component is re-rendered.

To trigger the useEffect hook at the first rendering and every time the component is re-rendered, there must be no array of dependencies.

useEffect(() => { // effect });

Example of no use: Do not use this structure to fetch data !

What is the cleanup function in useEffect?

Sometimes we need to stop a function, like a time counter launched with setInterval. There is no way to stop it except using clearInterval. In case the timer is not stopped, it will continue to run even if the component has been re-rendered. How is it possible to keep on running a time counter that does not exist any more? That would trigger an error : the famous memory leak error!

The solution is stopping it in the cleanup function return from within the useEffect function. This cleanup function will be called when the component is unmounted (similar to ComponentWillUnmount when using the class components and the lifecycle methods).

function Timer() {

const [time, setTime] = useState(0);

useEffect(() => {

let interval = setInterval(() => setTime(1), 1000);

return () => {

// setInterval cleared when component unmounts

clearInterval(interval);

}

}, []);

}

Obviously, the cleanup function is not required in every case. It is just needed when avoiding an effect to be repeated when the component is unmounted.

How many effects in the same component?

It is possible to trigger many effects (actions) in the same component.
Many effects can be grouped but it is better to separate them!

In conclusion

In the next episode, we will see some examples using the useEffect hook in a functional components!

comment

There is no comments. Leave the first one!