Forem: vithano

Optimizations in React part 2

vithano — Mon, 30 May 2022 19:41:37 +0000

To useMemo or not to useMemo?

You might have noticed that our CoolButton doesn't properly render the (+) sign:

<CoolButton clickHandler={increment}>+</CoolButton>

When inserting anything inside a JsxElement like CoolButton, we don't present it to the user, but pass it as a prop called children.

const CoolButton = React.memo(({ clickHandler,children }) => {
    const handler = () => {
        ReallyImportantCalculation();
        clickHandler();
    };
    return <button onClick={handler}></button>;
  });

Instead of nothing let's render the children:

return <button onClick={handler}>{children}</button>;

Just as before, let's add some complexity to our design.

Instead of presenting the user with the (+) sign, let's create a "Clicker" game, which will consist of a button that changes its appearance based on the number of times we click on it.

We can start by passing an <img/> instead of a (+) sign to our CoolButton:

<CoolButton clickHandler={increment}>
  <img/>
</CoolButton>

When clicking the button we notice that our memoization was lost once again; re-rendering the button on every click..

Let us remember that in JSX <img/> is not an html tag, it's actually a shorthand for React.createElement('img',props, ...children)

Turning our code into:

{createElement(CoolButton,{clickHandler:increment},
  createElement('img',null, null)
)}

Now it's easy to see the exact problem: running createElement on every render creates a new child that's being passed to our CoolButton as a prop.

First we need to take out the creation of our child from inside our CoolButton:

const CurrentImage = <img/>;
<CoolButton clickHandler={increment}>
  {CurrentImage}
</CoolButton>

You might be tempted to put the CurrentImage outside of our Counter, which would work, but seeing as CurrentImage will have a state based on our Counter we should use a different way:

const CurrentImage = useCallback(<img/>,[]);
<CoolButton clickHandler={increment}>
  {CurrentImage}
</CoolButton>

Just like before, useCallback to the rescue!
Though it looks a bit weird, as our CurrentImage is not really a callback, but a value we want to memoize.

useMemo

(From React docs)

useMemo, just like useCallback, takes a function that memoizes something and a dependency array that re-runs that function only when the dependencies change, in our case we want to memoize a JsxElement.

As we said earlier, the Children prop that we pass to our CoolButton changes on every render because we create a new CurrentImage every time.

We can useMemo to memoize CurrentImage and prevent the re-renders:

const CurrentImage = useMemo(() => <img/>,[]);
<CoolButton clickHandler={increment}>
  {CurrentImage}
</CoolButton>

To make this a bit more interesting, let's add a new state called phaseImgUrl which will tell us which image we should be presenting for every phase of our Clicker:

const [phaseImgUrl, setPhaseImgUrl] = useState('');
const CurrentImage = useMemo(() => <img src={phaseImgUrl}/>,[phaseImgUrl]);
<CoolButton clickHandler={increment}>
  {CurrentImage}
</CoolButton>

Here's some extra logic that will handle changing the phases when it reaches a certain threshold:

const phases = [
  "https://media4.giphy.com...phase1",
  "https://media4.giphy.com...phase2",
  "https://media4.giphy.com...phase3",
];

useEffect(() => {
    if (count != null) {
      const phaseThreshold = 30;
      const numPhases = phases.length;
      const nextPhaseImgUrl =
        phases[parseInt(count / phaseThreshold, 10) % numPhases];
      if (nextPhaseImgUrl !== phaseImgUrl) {
        setPhaseImgUrl(nextPhaseImgUrl);
      }
    }
  }, [count]);

First we check if the count is valid, and then it's important to make sure that the phase is different from the last one, so that we don't cause extra setStates and re-renders.

And there we go!

In the next part we will talk about the added effects and the dangers within them.

Optimizations in React part 1

vithano — Thu, 14 Apr 2022 19:24:59 +0000

Do we even need optimizations?

Seeing as most people leave a website within the first 5 seconds of nothing, we should make sure we are in a good spot, we can use Lighthouse to run a performance report from the inspect tab.

After looking at our website over at Workiz.com
we've noticed we had some place to improve so we decided to refactor some stuff and optimize some other stuff.

Re-Rendering

Let's start at the beginning, when does a React component re-render?

When either the props or state change
When a parent component re-renders
When a hook changes

Let's take a look at the next component:

const Counter = () => {
    const initialCount = 
parseInt(window.localStorage.getItem("count") ?? "0");
    const [count, setCount] = useState(initialCount);
    const increment = () => {
        window.localStorage.setItem('count', count + 1);
        setCount(count + 1);
    }
    return (
      <>
        Count: {count}
        <button onClick={increment}>+</button>
      </>
    );
  }

We have a component that has some initial state initialCount, which it gets from the localStorage, and a function "increment" which increments the count by 1, and then stores that count in the localStorage.

For the sake of readability I will rename some of the functions

const getCountFromLS = () => parseInt(window.localStorage.getItem("count") ?? "0");
const setCountToLS = (count) =>
window.localStorage.setItem('count', count);

const initialCount = getCountFromLS();
const [count, setCount] = useState(initialCount);

Every time we "increment", we notice that the initialCount is being read again from the localStorage even though we don't even use it beyond the first render.

Luckily for us useState accepts either a value or a callback function, meaning we can turn our initialCount into a function that returns a value, instead of just a value.
We can store the function in the scope of the Counter and call it only from the initialization callback we receive from useState.

const initialCount = () => getCountFromLS();
const [count, setCount] = useState(()=>initialCount());

This is called Lazy Initialization, it's a very subtle change, but now we are actually giving useState a function instead of a value, it's the same as this:

const initialCount = () => getCountFromLS();
const [count, setCount] = useState(initialCount);

Now every time our component re-renders it doesn't affect the initialCount as it's now being called only once during the first initialization of the component and never again...

...unless someone moves away from our Counter.
In that case when they go back to it, we will need to render the Counter for the first time again and do another heavy IO operation (getting stuff from the localStorage is expensive).

Which is why we should probably move the function call outside our component's life cycle, we would generally want to bring all our data somewhere at the top of our application instead of when a component requires it.

const expensiveInputOperation = getCountFromLS();
const Counter = () => {
    const [count, setCount] = useState(expensiveInputOperation);
...

Now we are doing the expensive operation outside of our component's life cycle and just passing the value to useState.
Since "expensiveInputOperation" is a constant there is no need to use a callback function.

Now let's introduce a new component called CoolButton.
CoolButton is just a very basic button that does some really important calculation every time we click on it.

const CoolButton = ({ clickHandler }) => {
    const handler = () => {
        ReallyImportantCalculation();
        clickHandler();
    };
    return <button onClick={handler}></button>;
  };

Let's replace the button in our Counter with our new CoolButton:

const Counter = () => {
    const [count, setCount] = useState(expensiveInputOperation);
    const increment = () => {
        setCountToLS(count + 1);
        setCount(count + 1);
    }
    return (
      <>
        Count: {count}
        <CoolButton clickHandler={increment}>+</CoolButton>
      </>
    );
  }

Now we have a Counter which has a CoolButton inside it.
When we click the button we actually render both the Counter and the CoolButton even though nothing changed in the CoolButton.

How do we stop this from happening?

React.memo

Luckily for us, React gives us a way to counter the rendering of the parent by allowing the child to render at its own pace, and not rely on the renders of the parent.
This is the same as using React.PureComponent instead of a regular React.Component

const CoolButton = React.memo(({ clickHandler }) => {
    const handler = () => {
        ReallyImportantCalculation();
        clickHandler();
    };
    return <button onClick={handler}></button>;
  });

Now we click the button and everything works properly, but we still keep on re-rendering the CoolButton...

Wasn't memo supposed to stop the re-renders?

To understand why this is happening it's important to remember that React checks if the props or the state changed based on shallow equality.
This means that when memo encounters an object in its props, it can't tell whether the objects are the same.

{'test':true} == {'test':true} // FALSE

Javascript checks whether the references are the same and not if they have the same values inside them.
Going back to our component, what happened that caused the re-render?

Let's take a look at the parent component again:

const Counter = () => {
    const [count, setCount] = useState(expensiveInputOperation);
    const increment = () => {
        setCountToLS(count + 1);
        setCount(count + 1);
    }
    return (
      <>
        Count: {count}
        <CoolButton clickHandler={increment}>+</CoolButton>
      </>
    );
  }

Every time we click the button we render Counter again.

When we render Counter all the functions are being run again, which means we get a new anonymous function called "increment" every time.
We then pass this new "increment" to our CoolButton as a prop, meaning "increment" from a render ago is not the same "increment" as we have right now, so it's only natural to re-render our button again.

What can we do?

React.useCallback

useCallback to the rescue!
This react hook ensures that we receive a reference to the function that will only change if one of the dependencies in the square brackets change, we can use this to memoize our "increment" function so that when Counter re-renders we will get the same "increment" and pass it to our CoolButton.

Attempt 1

const Counter = () => {
    const [count, setCount] = useState(expensiveInputOperation);
    const increment = useCallback(() => {
        setCountToLS(count + 1);
        setCount(count + 1);
    },[])
    return (
      <>
        Count: {count}
        <CoolButton clickHandler={increment}>+</CoolButton>
      </>
    );
  }

Ok cool so now we click the button, but it doesn't work more than once, why is that?
That's because our function never changes, so whichever value of count it received in the beginning, that's the same count it will have until it gets destroyed, meaning it will always be 0 :(

I guess we should just add our count to the dependencies array, right?
Well...yes we can do that, but then we would get a different "increment" every time count changes... which means we will need to re-render our CoolButton as well... back to square 1.

Attempt 2

Luckily for us setCount actually receives a callback function just like our useState function, only this one gives us the previous value and expects us to give it the next one.

Meaning we can do something like this:

 const increment = useCallback(() => {
        setCountToLS(count + 1);
        setCount(prevCount => prevCount + 1);
    },[])

Cool so now we have our setCount use a callback function.

What about the localStorage?
It still receives the same count every time, how can we fix this? Well that's easy enough -
Let's just put that call inside our setCount callback as well:

 const increment = useCallback(() => {
        setCount(prevCount => {
        setCountToLS(prevCount + 1);
        return prevCount + 1;
        })
    },[])

And now everything works properly!

const CoolButton = React.memo(({ clickHandler }) => {
    const handler = () => {
        ReallyImportantCalculation();
        clickHandler();
    };
    return <button onClick={handler}></button>;
  });
const expensiveInputOperation = 
parseInt(window.localStorage.getItem("count") ?? "0");
const Counter = () => {
   const [count, setCount] = useState(expensiveInputOperation);
   const increment = useCallback(() => {
   setCount(prevCount => {
          window.localStorage.setItem("count", prevCount + 1);
          return prevCount + 1;
        });
    }, []);
   return (
      <>
        Count: {count}
        <CoolButton clickHandler={increment}>+</CoolButton>
      </>
      );
  }

If you're asking yourself why aren't we wrapping our "handler" function in a useCallback as well, we should remember that memoization isn't free.
Everything in programming is a trade off, you gain some but lose other, for memoization we would need to keep this data somewhere to use it later.
Primitive types like <button>, <input>, <div>, etc. are very cheap to render so we don't have to save all of them.
We should use these techniques only when we see an impact on our user's experience, for the most part React does a pretty good job even with the re-renders.

The next part will be about useMemo, stay tuned!