Learn useMemo In 10 Minutes

Summary

This video from Kyle's React hooks series dives into the use of the `useMemo` hook in React. It explains how `useMemo` can improve performance by caching the result of a function, preventing unnecessary re-computations. The video demonstrates how `useMemo` can be used to optimize a slow function that is executed on every render, showing how it can reduce the delay caused by such functions. Additionally, it covers the concept of referential equality in JavaScript and how `useMemo` can be utilized to ensure hooks like `useEffect` only rerun when there's a meaningful change in the referenced objects. The video concludes with a reminder to use `useMemo` judiciously to avoid unnecessary memory and performance overhead.

Takeaways

• 📚 **UseMemo Introduction**: The video introduces the `useMemo` hook in React, explaining its purpose and when it should be used.
• 🔁 **Performance Optimization**: `useMemo` is used to optimize performance by memoizing the result of expensive function calls and only recomputing when necessary.
• ⏱️ **Slow Function Problem**: The script demonstrates a slow function that is re-run on every render, which can be inefficient and cause delays in the user interface.
• 💡 **Memoization Concept**: `useMemo` is based on the concept of memoization, caching the result of a function so it's not recalculated on every render when the inputs remain the same.
• 📈 **Dependencies List**: The hook takes a function and a list of dependencies; the function is re-executed only when one of the dependencies changes.
• 🚀 **Instantaneous Updates**: By using `useMemo`, the video shows how the theme toggle can be updated instantly without waiting for a slow function to execute.
• 🚧 **Overuse Caution**: The video warns against overusing `useMemo` due to the additional performance and memory overhead it can introduce if not necessary.
• 🤝 **Referential Equality**: A second use case for `useMemo` is managing referential equality, ensuring objects or arrays are only considered changed when their actual content changes, not just their reference.
• 🔗 **Effect on useEffect**: `useMemo` can be used to control when effects run by ensuring the reference to an object remains the same unless the dependency changes.
• 🛠️ **Selective Use of useMemo**: The video advises using `useMemo` selectively, only in cases where there are clear performance benefits or when dealing with referential equality issues.
• 📝 **Debugging Tips**: The script provides insights into debugging and understanding the reactivity and rendering behavior in React components.

Q & A

What is the main topic of the video?

The main topic of the video is an explanation of the `useMemo` hook in React and its proper usage.

Why is `useMemo` important in React applications?

`useMemo` is important because it helps improve performance by memoizing the results of expensive function calls and only recomputing them when one of the dependencies changes.

What does the video suggest as a condition for using `useMemo`?

The video suggests using `useMemo` when there is a need for performance optimization with slow-running functions or when ensuring referential equality of objects or arrays.

Why might one not want to use `useMemo` for every piece of state in a React component?

One might not want to use `useMemo` for every piece of state because it introduces additional memory and performance overhead by storing previous values and adding the extra function call on every render.

What is the downside of re-rendering a component with a slow function every time the state updates?

The downside is that the slow function will be executed on every render, causing unnecessary delays and performance issues, especially when the function does not need to be re-executed for the specific state change.

How does `useMemo` help with referential equality in React?

`useMemo` helps with referential equality by ensuring that the reference to an object or array remains the same across renders unless one of its dependencies changes, thus preventing unnecessary re-renders.

What is the purpose of the 'change theme' button in the example provided in the video?

The 'change theme' button is used to toggle between a dark and light theme in the example application, demonstrating how state updates can trigger re-renders and the potential performance impact.

How does the video demonstrate the effectiveness of `useMemo`?

The video demonstrates the effectiveness of `useMemo` by showing a noticeable performance improvement when toggling the theme without the delay that was present before using `useMemo` to wrap the slow function.

What is the role of dependencies in the `useMemo` hook?

Dependencies in the `useMemo` hook determine when the memoized function should re-run. If any of the dependencies change, the function will be re-executed; otherwise, the cached result will be used.

What is the second use case for `useMemo` discussed in the video?

The second use case for `useMemo` discussed in the video is to ensure that the reference of an object or array remains constant across component re-renders unless the actual content of the object changes.

What does the video recommend for optimizing React applications?

The video recommends using `useMemo` judiciously, only in cases where there are significant performance benefits, such as with slow functions or when dealing with referential equality issues.

Outlines

00:00

🚀 Introduction to useMemo and React Performance

This paragraph introduces the useMemo hook in React and its importance for performance. The speaker explains the use case of useMemo when dealing with slow functions that do not need to be recomputed on every render. They provide an example of a slow function that doubles a number and demonstrate how useMemo can prevent unnecessary re-execution of this function when the input (number) remains the same. The paragraph also discusses the potential performance and memory overhead of using useMemo and advises its use only when necessary.

05:00

📚 Referential Equality and useMemo for Dependencies

The second paragraph delves into the concept of referential equality in JavaScript and how it relates to React's useMemo hook. The speaker illustrates the issue with objects and arrays where even if they have the same values, they are not considered equal if they are different instances. This can lead to unnecessary re-renders if not handled correctly. To address this, useMemo can be used to ensure that a dependency object, like theme styles, is only re-evaluated when its actual content changes, not with every render. The speaker also provides a practical example of using useMemo within a useEffect hook to prevent unwanted side effects from firing.

10:01

🎓 Summary of useMemo Hook Use Cases

In the final paragraph, the speaker summarizes the two primary use cases for the useMemo hook. The first is optimizing performance by preventing the re-computation of slow functions when their inputs have not changed. The second is ensuring referential equality for objects or arrays, so that components only re-render when the actual content of these objects changes, not with every render cycle. The speaker encourages viewers to check out their full React course for a comprehensive understanding of React, and thanks the audience for watching.

Keywords

💡React

React is a popular JavaScript library for building user interfaces, particularly for single-page applications. It is the main focus of the video, as the script discusses various aspects of React development, such as hooks and performance optimization.

💡Hooks

In React, hooks are a feature that allows developers to use state and other React features without writing a class component. The video specifically covers the use of the `useMemo` hook, which is a way to optimize performance by memoizing computations.

💡useMemo

The `useMemo` hook is used in React to optimize performance by memoizing the result of a function. It is a key concept in the video, where the presenter explains how to use `useMemo` to avoid unnecessary recalculations of a slow function within a component's render.

💡Memoization

Memoization is a technique used to speed up programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again. In the context of the video, memoization is employed with `useMemo` to prevent the re-computation of a slow function unless necessary.

💡State

State in React refers to a component's data that, when changed, can trigger a re-render of the component. The video script mentions state in the context of a number and a boolean for theme toggling, which are used to demonstrate the effects of state changes on component re-renders.

💡Re-render

Re-rendering in React occurs when a component's state changes, causing the component to update its output. The video discusses the performance implications of re-renders, particularly when they are caused by slow functions that are re-executed on every render.

💡Performance Optimization

Performance optimization is the process of improving the efficiency and speed of an application. The video's main theme revolves around using React's `useMemo` hook for performance optimization by reducing unnecessary computations and re-renders.

💡Dependencies

In the context of React hooks, dependencies are a list of values that determine when a hook should re-execute its function. The video explains how the dependencies list in `useMemo` ensures that the memoized function is only re-run when the listed dependency values change.

💡Referential Equality

Referential equality in JavaScript means that two references point to the exact same object in memory. The video discusses how `useMemo` can be used to ensure that objects or arrays are only considered changed when their actual content changes, not just when a new reference is created.

💡Theme Styles

Theme styles refer to the visual design aspects of a user interface, such as colors and typography, that can be toggled between light and dark modes. In the video, theme styles are used as an example to illustrate how `useMemo` can prevent unnecessary re-renders when the style object's reference changes without actual content alteration.

💡Free Web Hosting

The term 'free web hosting' is mentioned in the context of a sponsorship offer. It is not directly related to the main technical content of the video but serves as an example of how the presenter might integrate promotional content into the video.

Highlights

Introduction to React's use memo hook and its purpose.

Explanation of when to use use memo to avoid unnecessary re-renders.

Demonstration of a slow function within a React component causing performance issues.

The concept of memoization in React to cache values and avoid re-computation.

How use memo can optimize performance by caching the result of a slow function.

Live coding example showing the impact of use memo on the app's performance.

Instantaneous theme toggle after implementing use memo, showcasing its effectiveness.

Discussion on the potential overheads of using use memo in terms of performance and memory.

Guidelines on when to use use memo based on the necessity of performance benefits.

Introduction to referential equality and its significance in JavaScript.

Example of how use memo can be used to ensure referential equality for objects or arrays.

Use case of use memo to prevent unnecessary re-renders due to object reference changes.

Explanation of the two primary use cases for use memo: optimizing slow functions and ensuring referential equality.

Recommendation to use use memo judiciously to avoid unnecessary memory and performance overhead.

Link to a full React course for deeper understanding provided in the video description.

Summary of the key points about use memo for optimizing React components.

Closing remarks and thanks for watching the React hooks series video.

Transcripts

hello everyone welcome back to my react

hooks series or in this video we're

gonna take a look at use memo how it

works and when you should actually use

it and if you're interested in diving

into react even deeper make sure to

check out my full react course which I'm

gonna link down in the description below

have you wanted free web hosting that

doesn't suck well you're in luck because

today's video sponsor atlanticnet is

giving you an entire year long free

trial of their hosting and if you use

the code Kyle when you check out you're

gonna get an additional $50 of credit

that you can use towards whatever you

want on the hosting platform on top of

that this hosting platform has powerful

servers with great data reliability and

redundancy so you know that your site is

going to be there and running with the

data you want it to so make sure you use

the code Kyle in the link down in the

description below to get your free

hosting welcome back to web data

simplified my name is Kyle and my job is

to simplify the web for you so you can

start building your dream project sooner

so if that sounds interesting make sure

you subscribe to the channel for more

videos just like this now to get started

I just have some really basic

boilerplate code set up for us to test

our application I'm gonna walk through

it real quick so you know exactly what

we're doing I just have a simple single

component called app which has two

pieces of state one is a number which we

can control by this input over here on

the right and the second one is a

boolean for dark or light which is

toggled by this change theme button on

the right side of our screen then what

we do is we have a function which

doubles our number so just multiplies by

two but this function is very slow if I

scroll down here you can see I just have

a really long for loop that just loops

doing nothing for a really long time to

emulate what would happen in a really

slow long-running complex function

obviously since this function just

multiplies by two all this code is doing

is making the function really slow and

if I change this number for example by

clicking this up arrow you're gonna see

it takes about a second half a second

for it to actually double the number so

you can see this function is quite slow

to execute now continuing onward we just

have a variable here which is taking

this dark boolean and changing if we

have a darker

theme down here and then lastly over

here we just have the output code which

changes our number when we update here

and also toggles our theme when we click

this button so that's just the basics of

our code and you may think okay this is

fine code it's working great and the

slowness is you know not that bad but it

only is gonna be slow going we update

our number but actually that's incorrect

thinking if we click our change theme

button you're gonna notice we have the

same delay I'm going to click it now you

can see it takes about half a second to

a second for it to actually change the

actual theme and the reason for that is

because one you update state and react

it's going to re-render your entire

component so it's going to run this

entire function from top to bottom which

means that this slow function gets

called every single time that we render

our app component so whether we're

changing the theme whether we're

actually updating the number here or

whether some other component is causing

this component to re-render you're going

to be forcing it to go through that slow

function over and over and over again

and this is a really big performance

problem when you have these slow

functions that don't really change that

often so react has a built in way to

solve this with a hook which is called

use memo so we can import this views

memo hook just like this and memo here

stands for memoization which essentially

is the idea of caching a value so you

don't have to recompute it every single

time so in our example this slowed

function here takes an input of a number

and it's always going to give us the

same output every time we give it the

same input so we can cache that input

value number and the output it gives us

that way if the number doesn't change we

don't have to recalculate our SLO

function over and over and over again

and the easy way to use this is we just

call use memo and we're going to pass it

in a function and this function is going

to be the thing that we actually

memorize so this is the thing that we're

caching which in our case is going to be

this slow function we just want to make

sure we return this slow function here

get the result from it and then just

like all of the other hooks that we

talked about like use effect for example

we're going to have a list of

dependencies here and in our case the

the dependency of this is going to be

our number here our number is the only

thing that changes and when our number

changes we need to rerun the code inside

this use memo hook but if our number

doesn't change we don't need to rerun

this slow function code so with that one

simple change let's save and see what

happened to our app it's loading over

here we can change this to for example 1

and you can see it has a kind of delay

change it up again it's going to have a

delay when we click Change theme you're

going to notice this is instantaneous I

can click it as much as I want to and

that's because when we go through our

code we click Change theme it causes our

component to re-render so it calls this

function does all this stuff and it gets

down to use memo and it says well our

number is exactly the same as what it

was last time so we're not gonna recall

this slow function here because we

already know what the result is it's the

exact same thing as it was last time so

we're saving ourselves from having to

recalculate this number with the slow

function and we only are forcing

ourselves to do this when we actually

update this number instead of our input

here so we're essentially only running

this slow code when we have to and not

running it when we don't actually need

to now this seems really nice and you

may think let me just use memo

everywhere why not just memorize

everything like this theme style is here

why don't I memorize that based on this

dark boolean variable and the reason you

don't want to memorize everything is

because it does give you some

performance overheads and some memory

overhead for example this used memo

function must be called every single

render of your component so you're

calling an additional function and also

it's saving the value this previous

value in some memory variable so you're

forcing your memory to get larger every

time you use memo because you have to

store an additional variable in memory

to store that previous value now this

isn't a huge deal but if you start to do

this everywhere in your application

especially where you don't need it it's

going to cause additional memory usage

and additional performance problems when

just not using it would have been better

so I highly recommend you only use memo

in this case when you actually need the

performance benefits when the function

you're calling is incredibly slow then

use memo is great but there's also a

second use case for used memo

and that is something called the

referential equality and if you aren't

really familiar with value versus

reference in JavaScript I have a video

on that topic I'll link in the cards in

description but essentially what that is

saying is when you try to compare two

different variables in JavaScript it's

going to compare the reference in the

case of objects and arrays so for

example this theme Styles here is a

specific object and if I were to

duplicate this theme styles for example

theme Styles to right here you would

think that theme styles and theme style

2 are equal to each other but in

JavaScript they reference two different

objects they have the same values in the

object but the actual reference to the

object itself is different these two

values are actually not equal to each

other

which is something really important and

as you know instead of hooks and react

we have this array here all of our

dependencies and when our dependencies

change it's going to rerun our hook so

let's click a quick example where we

have a use effect and we want to run

this use effect every single time that

our theme styles here changes so we're

just gonna have a really simple

console.log theme that changed and down

here inside of our dependencies I'm

going to have our theme styles let's

just get rid of this console down here

and of course we need to make sure we

import use effect just like that and now

if I just really quickly inspect this

page here pull this over go to the

console oops console you can see we get

our theme changed being printed out and

when we change our theme you can see

it's continually printing out theme

changed but a problem you'll notice if I

clear this out is when we change our

number it's also causing this theme

change to be run and the reason for that

is that referential equality what's

happening is every time we run our

function we get a new theme styles

object being created and this new theme

style object is not the same as the old

theme styles even though they have the

exact same values in the object the

reference different places in memory and

that's really important to know so in

order to make sure that we only ever run

use effect when our theme style object

actually gets real we can use memo

so what we can do is wrap this in a used

memo make sure you pass it a function

and in here we're just going to return

to that object you just indent all this

properly and in here for our

dependencies we're just gonna put that

dark variable because that's the only

thing that this object depends on now if

we were to rerun this you can see a

change in our theme causes this to

update our theme logs it out but when we

change our number you're gonna notice we

don't actually get anything printed in

our console and only when we click

change theme and the reason for this is

that now we are wrapping this object

inside of memorisation essentially if

our dark variable doesn't change

we don't read 8 our theme styles so we

get the exact same reference as we had

the previous time we rendered our app so

now our use effect is comparing our old

theme styles with our new theme styles

but they both reference the exact same

object so these are the two big use

cases for a use memo the first and most

obvious is when you want to make a slow

function we wrap it in this use memo so

that doesn't recompute every single time

you render your component and it only

computes when you actually need the

value from that function since the

inputs actually changed the second use

case which is a little bit trickier is

this idea of a referential equality

whenever you want to make sure the

reference of an object or an array is

exactly the same as it was the last time

you rendered if none of the internal

workings changed you're gonna want to

use memo here to make sure that you only

update the reference of that object

whenever the actual contents of the

object change instead of updating every

single time you render and that's all

there is to the used memo hook if you

enjoyed this video make sure to check

out my full react course linked in the

description to get a full overview of

everything you need to know about react

thank you very much for watching and

have a good day