What is a React Side-Effect?
A React side-effect occurs when we use something that is outside the scope of React.js in our React components e.g. Web APIs like localStorage.
If you are short of time, here is the quick version:
- When we talk about side effects in the context of React.js, we are referring to anything that is outside the scope of React
- So calling any native Web APIs will be considered as a side effect as it’s not within the React universe
- Making a HTTPS request to an external API is another example of a side effect and the list goes on…
- We usually manage React side effects inside the useEffect hook (part of the React Hooks API)
If you can stay a little longer, read on.
What do I mean by outside of the React scope?
It means not part of the React framework, for example, the localStorage in your browser.
Local Storage is a Web API and not part of the React universe.
On a side note, localStorage is an essential tool for building web applications. You can read more about it at the official MDN website:
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);
}, []);Another example of creating side-effects is using native DOM methods instead of methods included in React:
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 you mean by managing the side-effects effectively?
I mean whether or not we can effectively 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.
That’s all for this article!
If you are thinking of switching to a career in tech or changing to a new tech job, here are some job sites you can get started with:
- https://underdog.io
- https://dailytechjobs.com
- https://www.hiretechladies.com
- https://weworkremotely.com
Start planning for your new journey today!
If you want to know how data fetching works in Next.js, read one of our most popular articles on the topic here.
If you need help with learning Javascript or your Javascript coding interview, you can reach out to us at team@remoteupskill.com
We publish short tech tutorials on a regular 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!
