How Do You Handle Side Effects of ReactJS? – Source: securityboulevard.com

In ReactJS application development, using the useEffect hook is the most prominent way to handle side effects. It’s a hook that lets developers process side effects for updating DOM, fetching data, and using timers. And every useEffect needs two arguments to operate. 

Syntax of useEffect: 

useEffect(, ) 

The argument in the syntax is mandatory; however, you can skip to provide a variable for the argument. 

Furthermore, you must understand the following concepts about the control flow of the useEffect: 

• The ReactJS components are based on state, change of context, and prop for re-rendering. 
• If multiple useEffect hooks are defined in the code, then ReactJS will analyze and cross-verify all with the current condition. And the best one aligning with the conditions will get processed. 
• The second argument, i.e., , is an array from the state, context, or props components. 
• The scheduling and execution of every side-effect depend upon the definition of its dependencies. 
• If you don’t provide a dependency argument in the useEffect syntax, that particular effect will be processed after each rendering. 

Additionally, it would be best to use the useEffect hook’s cleanup functionality. It aids in minimizing memory leaks for side effects that are not needed further. You must utilize it for timeouts, event listeners, and similar services. 

However, before you start implementing the useEffect hook, focus on the associated rules: 

• You can only invoke the useEffect hook from the top-level function. And that function must contain your React component. 
• You cannot call useEffect hooks within the nested code and inside another function. 
• You can create custom useEffect hooks as per your requirement. But, the condition is the same, as you can only call a hook from the top-level function. 

Once you understand all three rules, utilizing useEffect and handling side-effects will become effortless. And your ReactJS application will seamlessly connect with external sources through APIs for data-oriented operations. 

Now, let’s look at the code to define the useEffect hook. 

In the provided above code, you can see that useEffect gets defined with only the first mandatory argument. It means that it will execute after every rendering. You must execute this code on your machine to dig deeper into the concept.

Moreover, the code contains a console.log statement, enabling one to view the side-effect working by analyzing the logs. And in the logs, you will see that first, the ReactJS code is rendering, and then the useEffect hook is coming into action.

Let’s see more examples based on different situations, execution after the first rendering and execution after every rendering.

Code example for useEffect processing after first rendering.

With this code, you can enable the ReactJS application to update the loadData directly after the first rendering.

Copy to Clipboard

function App() {


const [loading, setLoading] = useState(false);


const [data, setData] = useState(null);


function loadData() {


setLoading(true);


setTimeout(() => {


setLoading(false);


setData([1, 2, 3, 4, 5]);


}, 1000);


}

useEffect(loadData, []);

return (


<>


{loading &&

Loading…

}


{data &&

{JSON.stringify(data, null, 1)}

}


>


);


}

ReactDOM.createRoot(document.getElementById(‘root’)).render();

In most cases where you don’t pass the dependency argument, the useEffect hook gets executed after every rendering. In the code example, in which the user inputs the title, it’s possible to face such a problem. Thus, to eliminate it, you must pass an empty dependency or array. As a result, the ReactJS application will function as per requirements.

Also, you must ensure that you don’t use the side-effect functionality if the application needs to transform data for rendering purposes. And for handling and managing user events. For rest operations, the side-effect is a reliable React component.