Photo by Hush Naidoo Jade Photography on Unsplash

A React side-effect occurs when we use something that is outside the scope of React.js in our React components e.g. the Browser APIs like localStorage.

What do I mean by outside of the React scope?

It means that it is not part of the React framework, for example, the localStorage in your browser.

When we use React with any of the Browser’s API such as the localStorage, we are creating side-effects.

For example, if we run this code, we are creating a side-effect by storing some value in localStorage.

useEffect(() => {localStorage.setItem('some key', true); }, []);

If we use the native DOM methods instead of the ReactDOM is another example of creating side-effects:

useEffect(() => {document.getElementById("overlay").style.display = "block";}, []);

The main thing we should be concerned with is whether we can manage these side-effects effectively.

What do I mean by managing the side-effects effectively?

I mean can we easily keep track of the changes in the side-effects and whether we can manage the side-effects in a single place or a single component within our frontend application.

You can read more about the different Browser’s API available to you for web development here.

We publish short tech tutorials on a weekly basis so consider subscribing to our Medium Blog.

Until next time — keep coding while moving small steps forward on this coding adventure of yours.

But more importantly, stay focused!