LukeParke/unicorn-utterances

Fork 0

mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-09 21:07:49 +00:00

Files

Corbin Crutchley 2f42527149 chore: finish initial renderFunctions contents

2023-02-28 22:32:30 -08:00

18 KiB

Raw Blame History

title, description, published, authors, tags, attached, license

title

description

published

authors

Memoizing Return Values with `useMemo`

Let's say that we're building an ecommerce application and want to calculate the sum of all items in the cart:

const ShoppingCart = ({items}) => {
    const getCost = () => {
        return items.reduce((total, item) => {
            return total + item.price;
        }, 0);
    }

    return (
        <div>
            <h1>Shopping Cart</h1>
            <ul>
                {items.map(item => <li>{item.name}</li>)}
            </ul>
            <p>Total: ${getCost()}</p>
        </div>
    )
}

This should show all items and the total cost, but this may cause headaches when ShoppingCart re-renders.

After all, a React functional component is a normal function, after all, and will be ran like any other; where getCost is recalculated on subsequent renders when you don't memoize the value.

This getCost function may not be overly expensive when there's only one or two items in the cart, but this can easily become a costly computation when there are 50 items or more in the cart.

The fix? Memoize the function call using useMemo so that it only re-runs when the items array changes:

const ShoppingCart = ({items}) => {
    const totalCost = useMemo(() => {
        return items.reduce((total, item) => {
            return total + item.price;
        }, 0);
    }, [items]);

    return (
        <div>
            <h1>Shopping Cart</h1>
            <ul>
                {items.map(item => <li>{item.name}</li>)}
            </ul>
            <p>Total: ${totalCost}</p>
        </div>
    )
}

Function Instability Causes Re-renders

Let's expand this shopping cart example by adding in the ability to add new items to the shopping cart.

import {useState, useMemo} from 'react';
import {v4 as uuid} from 'uuid';

const ShoppingItem = ({item, addToCart}) => {
  return (
    <div>
      <div>{item.name}</div>
      <div>{item.price}</div>
      <button onClick={() => addToCart(item)}>Add to cart</button>
    </div>
  )
}

const items = [
  { id: 1, name: 'Milk', price: 2.5 },
  { id: 2, name: 'Bread', price: 3.5 },
  { id: 3, name: 'Eggs', price: 4.5 },
  { id: 4, name: 'Cheese', price: 5.5 },
  { id: 5, name: 'Butter', price: 6.5 }
]

export default function App() {
  const [cart, setCart] = useState([])

  const addToCart = (item) => {
    setCart(v => [...v, {...item, id: uuid()}])
  }

  const totalCost = useMemo(() => {
    return cart.reduce((acc, item) => acc + item.price, 0)
  }, [cart]);

  return (
    <div style={{display: 'flex', flexDirection: 'row', flexWrap: 'nowrap'}}>
      <div style={{padding: '1rem'}}>
        <h1>Shopping Cart</h1>
        {items.map((item) => (
          <ShoppingItem key={item.id} item={item} addToCart={addToCart} />
        ))}
      </div>
      <div style={{padding: '1rem'}}>
        <h2>Cart</h2>
        <div>
          Total: ${totalCost}
        </div>
        <div>
          {cart.map((item) => (
            <div key={item.id}>{item.name}</div>
          ))}
        </div>
      </div>
    </div>
  )
}

If I now click any of the items' Add to cart buttons, it will:

Trigger the addToCart function
Update the cart array using setCart
1. Generating a new UUIDv4 for the item in the cart
Cause the App component to re-render
Update the displayed items in the cart
Re-run the totalCost useMemo calculation

This is exactly what we'd expect to see in this application. However, if we open the React Developer Tools, and inspect our Flame Chart, we'll see that all ShoppingItem components are re-rendering, despite none of the passed items changing.

The reason these components are re-rendering is because our addToCart property is changing.

That's not right! We're always passing the same addToCart function on each render!

While this may seem true at a cursory glance, we can check this with some additional logic:

// This is not good production code, but is used to demonstrate a function's reference changing
export default function App() {
  const [cart, setCart] = useState([])

  const addToCart = (item) => {
    setCart(v => [...v, {...item, id: uuid()}])
  }

  useLayoutEffect(() => {
    if (window.addToCart) {
      console.log("addToCart is the same as the last render?", window.addToCart === addToCart);
    }

    window.addToCart = addToCart;
  });

  // ...
}

This code:

Sets up addToCart function inside of the App
Runs a layout effect on every render to:
- Assign addToCart to window.addToCart
- Checks if the old window.addToCart is the same as the new one

With this code, we would expect to see true if the function is not reassigned between renders. However, we instead see:

addToCart is the same as the last render? false

This is because, despite having the same name between renders, a new function reference is created for each component render.

Think of it this way: Under-the-hood, React calls each (functional) component as just that - a function.

Imagine we're React for a moment and have this component:

// This is not a real React component, but is a function we're using in place of a functional component
const component = ({items}) => {	
  const addToCart = (item) => {
    setCart(v => [...v, {...item, id: uuid()}])
  }

  return {addToCart};
}

If we, acting as React, call this component multiple times:

// First "render"
const firstAddToCart = component().addToCart;
// Second "render"
const secondAddToCart = component().addToCart;

// `false`
console.log(firstAddToCart === secondAddToCart);

We can see a bit more clearly why addToCart is not the same between renders; it's a new function defined inside of the scope of another function.

Create function stability with `useCallback`

So, if our ShoppingItem is re-rendering because our addToCart function is changing, how do we fix this?

Well, we know from the previous section that we can use useMemo to cache a function's return between component renders; what if used that here as well?

export default function App() {
  const [cart, setCart] = useState([])

  const addToCart = useMemo(() => {
    return (item) => {
      setCart(v => [...v, {...item, id: uuid()}])
    }
  }, []);

  // ...

  return (
    <div style={{display: 'flex', flexDirection: 'row', flexWrap: 'nowrap'}}>
      <div style={{padding: '1rem'}}>
        <h1>Shopping Cart</h1>
        {items.map((item) => (
          <ShoppingItem key={item.id} item={item} addToCart={addToCart} />
        ))}
      </div>
      {/* ... */}
    </div>
  )
}

Here, we're telling React never to re-initialize the addToCart function by memoizing the logic inside of a useMemo.

We can validate this by looking at our flame chart in the React DevTools again:

And re-checking the function reference stability using our window trick:

// ...

const addToCart = useMemo(() => {
  return (item) => {
    setCart(v => [...v, {...item, id: uuid()}])
  }
}, []);

useLayoutEffect(() => {
  if (window.addToCart) {
    console.log("addToCart is the same as the last render?", window.addToCart === addToCart);
  }

  window.addToCart = addToCart;
});

// ...

addToCart is the same as the last render? true

This use-case of memoizing an inner function is so common that it even has a shortform helper called useCallback:

const addToCart = useMemo(() => {
  return (item) => {
    setCart(v => [...v, {...item, id: uuid()}])
  }
}, []);

// These two are equivilant to one another

const addToCart = useCallback((item) => {
  setCart(v => [...v, {...item, id: uuid()}])
}, []);

Render Functions are Expensive

So, we've demonstrated earlier how functions like this:

<p>{someFn()}</p>

Can often be bad for your UI's performance when someFn is expensive.

Knowing this, what do we think about the following code?

export default function App() {
  // ...

  const renderShoppingCart = () => {
    return <div style={{ padding: '1rem' }}>
      <h2>Cart</h2>
      <div>
        Total: ${totalCost}
      </div>
      <div>
        {cart.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    </div>;
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'nowrap' }}>
      <div style={{ padding: '1rem' }}>
        <h1>Shopping Cart</h1>
        {items.map((item) => (
          <ShoppingItem key={item.id} item={item} addToCart={addToCart} />
        ))}
      </div>
      {renderShoppingCart()}
    </div>
  )
}

Here, we're defining a renderShoppingCart function inside of App and calling it inside of our return render statement.

At first glance, this seems bad because we're calling a function inside of our template. However, if we think about it more, we may come to conclusion that this is not entirely dissimilar to what React is doing anyway.

After all, React must be running the div for each render anyways, right? ... Right?

Not quite.

Let's look at a more minimal version of the above:

const Comp = ({bool}) => {
    const renderContents = () => {
        return bool ? <div/> : <p/>
    }

    return <div>
        {renderContents()}
    </div>
}

Now, let's take a step even further within the renderContents function:

return bool ? <div/> : <p/>

Here, JSX might be transformed to the following:

return bool ? React.createElement('div') : React.createElement('p')

After all, all JSX is transformed to these React.createElement function calls during your app's build step. This is because JSX is not standard JavaScript and needs to be transformed to the above in order to execute in your browser.

This JSX to React.createElement function call changes when you pass props or children:

<SomeComponent item={someItem}>
    <div>Hello</div>
</SomeComponent>

Would be transformed to:

React.createElement(SomeComponent, {
    item: someItem
}, [
    React.createElement("div", {}, ["Hello"])
])

Notice how the first argument is either a string or a component function, while the second argument is props to pass to said element. Finally, the third argument of createElement is the children to pass to the newly created element.

Knowing this, let's transform Comp from JSX to createElement function calls. Doing so changes:

const Comp = ({bool}) => {
    const renderContents = () => {
        return bool ? <div/> : <p/>
    }

    return <div>
        {renderContents()}
    </div>
}

To:

const Comp = ({bool}) => {
    const renderContents = () => {
        return bool ? React.createElement('div') : React.createElement('p')
    }

    return React.createElement('div', {}, [
		renderContents()    
    ])
}

With this transform applied, we can see that whenever Comp re-renders, it will re-execute the renderContents function, regardless of it needs to or not.

This might not seem like such a bad thing, until you realize that we're creating a brand new div or p tag on every render.

Were the renderContents function to have multiple elements inside, this would be extremely expensive to re-run, as it would destroy and recreate the entire subtree of renderContents every time. We can fact-check this by logging inside of the div render:

const LogAndDiv = () => {
	console.log("I am re-rendering");
	return React.createElement('div');
}

const Comp = ({bool}) => {
    const renderContents = () => {
        return bool ? React.createElement(LogAndDiv) : React.createElement('p')
    }

    return React.createElement('div', {}, [
		renderContents()    
    ])
}

export const App = () => React.createElement(Comp, {bool: true});

And seeing that I am re-rendering occurs whenever Comp re-renders, without fail.

What can we do to fix this?

Re-use `useCallback` and `useMemo` to avoid render function re-initialization

If we think back on earlier sections of this article, we may think to think reach for a set of tools we're already familiar with: useMemo and useCallback. After all, if the issue is that renderContents is not providing a stable reference of values, we now know how to fix that.

Let's apply the two to our codebase to see if it fixes the problem:

const LogAndDiv = () => {
	console.log("I am re-rendering");
	return <div/>;
}

const Comp = ({bool}) => {
    // This is a suboptimal way of solving this problem
    const renderContents = useCallback(() => {
        return bool ? <LogAndDiv/> : <p/>
    }, [bool]);

	const renderedContents = useMemo(() => renderContents(), [renderContents]);

    return <div>
        {renderedContents}
    </div>
}

Let's re-render this component annnnnnnnnnnd...

Success! It only renders LogAndDiv when bool changes to true, then never re-renders again.

But wait... Why is there a comment in the code sample above that says it's a suboptimal way of solving this problem?

Remove costly render functions with component extraction

The reason it's not ideal to use useMemo and useCallback to prevent render functions' rerenders is because:

It's challenging to debug, the stacktrace for these renderContents is harder to follow.
It creates longer components without the ability to portably move these sub-elements.
You're doing React's job without knowing it.

Like, if we think about what renderContents is doing for a moment; it's acting like a child component that shares the same lexical scoping as the parent. The benefit of doing so is that you don't need to pass any items to the child, but it comes at the cost of DX and performance.

Instead of this:

const LogAndDiv = () => {
	console.log("I am re-rendering");
	return <div/>;
}

const Comp = ({bool}) => {
    // This is a suboptimal way of solving this problem
    const renderContents = useCallback(() => {
        return bool ? <LogAndDiv/> : <p/>
    }, [bool]);

	const renderedContents = useMemo(() => renderContents(), [renderContents]);

    return <div>
        {renderedContents}
    </div>
}

We should be writing this:

const LogAndDiv = () => {
	console.log("I am re-rendering");
	return <div/>;
}

const Contents = () => {
	return bool ? <LogAndDiv/> : <p/>
}

const Comp = ({bool}) => {
    return <div>
        <Contents bool={bool}/>
    </div>
}

This will solve our performance problems without needing a useMemo or a useCallback.

How?

Well, let's again dive into how JSX transforms:

const LogAndDiv = () => {
	console.log("I am re-rendering");
	return React.createElement('div');
}

const Contents = () => {
	return bool ? React.createElement(LogAndDiv) : React.createElement('p')
}

const Comp = ({bool}) => {
    return React.createElement('div', {}, [
        React.createElement(Contents, {
            bool: bool
        })
    ]);
}

Let's look closer at what React's createElement actually returns. Let's console.log it:

console.log(React.createElement('div'));
// We could also: `console.log(<div/>)`

Doing so gives us an object:

// Some keys are omitted for readability
{
  "$$typeof": Symbol("react.element"),
  key: null,
  props: { },
  ref: null,
  type: "div",
}

Notice this object does not contain any instructions on how to create the element itself. This is the responsibility of react-dom as the renderer. This is how projects like React Native can render to non-DOM targets using the same JSX as react.

This object is known as a "Fiber node", part of React's reconciler called "React Fiber".

Very broadly, React Fiber is a way of constructing a tree off of the passed elements from JSX/createElement. For web projects, this tree is a mirrored version of the DOM tree and is used to reconstruct the UI when a node re-renders. React then uses this tree, called a "Virtual DOM" or "VDOM", to intelligently figure out which nodes need to be re-rendered or not based off of the state and passed props.

This is true even for functional components. Let's call the following:

const Comp = () => {
  return <p>Comp</p>;
}

console.log(<Comp/>);
// We could also: `console.log(React.createElement(Comp))`

This will log out:

{
  "$$typeof": Symbol("react.element"),
  key: null,
  props: {  },
  ref: null,
  type: function Comp(),
}

Notice how type is still the function of Comp itself, not the returned div Fiber node. Because of this, React is able to prevent a re-render if Comp is not needed to be updated.

However, if we instead call the following code:

const Comp = () => {
  return <p>Comp</p>;
}

console.log(Comp());

We now get the fiber node of the inner p tag:

{
  "$$typeof": Symbol("react.element"),
  key: null,
  props: { children: [ "Comp" ] },
  ref: null,
  type: "p",
}

This is because React is no longer in control of calling Comp on your behalf and is always called when the parent component is rendered.

18 KiB Raw Blame History

Memoizing Return Values with useMemo