Today, we're going to explore a fascinating aspect of React development that often goes unnoticed: . As React developers, we frequently use this handy tool in our projects. how the useEffect hook affects performance But have you ever wondered why it runs after the component has been rendered on the screen? I've always been curious about this. Why does it work that way? In this post, I'll walk you through the reason behind this choice made by the React team and see how it can actually make your application faster. We'll use practical examples to demonstrate the concept. Are you ready? Then hit that ❤️ button on the right, and Let's get started! An Example of Using localStorage Let's talk about , also known as . It's a handy browser feature that allows us to store data using and . However, there's a slight downside to it. localStorage window.localStorage keys values You see, localStorage works synchronously, which means that it may cause some issues. Yes, let me explain! console.log("A"); // A
localStorage.setItem("key", "value"); // An assumed ongoing process...
console.log("B"); // I am still waiting..... In the code snippet above, something interesting happens. First, we see the console logging of  the string . Then, we have doing its thing, which takes about 200 milliseconds to finish. A localStorage.setItem() During this time, the patiently waits for to complete before it can log anything. console.log("B") localStorage.setItem() Now, why is this not ideal? Well, it can potentially cause your application to slow down right away. Nobody wants that, right? If you only need to store a few items, it's not a big deal to use localStorage. However, it's generally not recommended to rely on it too heavily because it tends to be quite slow in terms of performance. So, keep this in mind when working with localStorage, and try to use it sparingly, especially if you want to keep your application running smoothly. If you haven't had the chance to use useEffect, I highly recommend reading this from before you proceed. detailed guide about useEffect @nirmalkumar Using localStorage Within a Component Let's imagine you want to use the feature in a React component. In that case, it's recommended to use it within a hook for a couple of reasons: localStorage useEffect It's considered a side effect because it modifies something outside the React component. It can also improve performance, as I'll explain. To give you an example of why performance could be affected, let's assume we have a large array of objects stored in a file. We can import this array and save it into within a React component. data.js localStorage Here's the code snippet: import {useState} from "react";
import data from "./data.js";

function App() {
    const [random, setRandom] = useState(Math.random());

    // THIS IS BAD FOR PERFORMANCE
    localStorage.setItem("data", JSON.stringify(data));

    return <>
        <h1>{random}</h1>
        <button>Re-render</button>
    </>
} The code snippet above could potentially run into a small issue. If the function takes around 200ms to complete, it can cause a noticeable delay in showing updates on the user's screen. localStorage.setItem() This delay might not be ideal for the performance of your application. To illustrate this issue, I have taken the example code and exaggerated it by including 200 and calls. You'll see the impact of this in just a moment. localStorage.setItem() localStorage.getItem() To address this performance concern, I have come up with an optimized version of the code. In this optimized version, I encapsulated the 200 localStorage calls within a hook. useEffect This is why the code execution will be more efficient, and the user will experience smoother updates on their screen. Here’s the code: import {useState, useEffect} from "react";
import data from "./data.js";

function App() {
    const [random, setRandom] = useState(Math.random());

    // this is BETTER for performance
    useEffect(() => {
        localStorage.setItem("data", JSON.stringify(data));
    });

    return <>
        <h1>{random}</h1>
        <button>Re-render</button>
    </>
} If we wrap the calls with , it allows the component to render on the screen first, and then perform the operations afterward. This approach helps prevent any performance issues that may arise when dealing with a large number of components. localStorage useEffect localStorage To demonstrate this, let's take a look at an exaggerated example where I increase the number of calls to simulate potential performance challenges. localStorage Component With 200 localStorage Calls Click on the button labeled Re-render as fast as you can in the below example. In this case, we directly make 200 localStorage calls inside the component itself. Pay attention to the responsiveness of the button. https://codepen.io/nyjokid/pen/rNQwmBa?embedable=true Using useEffect With 200 localStorage Calls: Now, do the same in this example. This time, we use the hook in React to make the 200 localStorage calls. useEffect Notice any differences in the responsiveness compared to the first example 😃 https://codepen.io/nyjokid/pen/eYQRWQg?embedable=true If you take a close look at the first example, you'll notice that the button stays active (highlighted in red) because it's getting stuck while processing all the JavaScript code. Just remember, isn't a cure-all solution. If the code inside is really slow, it can still affect the overall performance. useEffect useEffect Now, It's Your Turn 🥳 Have you ever faced any performance challenges while working on your React projects? How did you tackle them? I'd love to hear your thoughts and experiences, so feel free to share them in the comments section. And if you found this post helpful, don't forget to hit the ❤️ button on the top right and spread the word among your fellow React developers. Keep exploring, and enjoy coding 👋

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

This Is Why React Team's useEffect Strategy Shines (CodePen Examples Inside)

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Advanced React Router V6 Techniques: Going Beyond the Basics

10 Useful JavaScript Functions to Learn

100+ FREE Resources to Learn Full Stack Web Development

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

10 React JS Articles Every Web Developer Should Read

Advanced React Router V6 Techniques: Going Beyond the Basics

10 Useful JavaScript Functions to Learn

100+ FREE Resources to Learn Full Stack Web Development

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

10 React JS Articles Every Web Developer Should Read

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps