Performantly Render a Large List of Items with React Context

Dave Ceddia
InstructorDave Ceddia

Share this video with your friends

Send Tweet

One tripping point with Context is that it will automatically re-render the subtree under a Provider whenever that Provider’s value changes, which can lead to performance problems if you aren’t careful. In this lesson you’ll learn what to watch out for, and a simple trick for avoiding unnecessary re-renders to keep your app running smoothly. You'll also learn how to use React.memo to optimize individual function components.

Ilham Wahabi
Ilham Wahabi
~ 2 years ago

great course!

Yazid
Yazid
~ 2 years ago

great course thank you, I just have one question, instead of putting all the context values inside the state why not using memoization to construct the context values

const m = memoize((state, notify) => ({ ...state, notify }))
<Provider value={m(this.state, this.notify)} >...
Carlos
Carlos
~ 2 years ago

Great course!!

Just one thing to talk about: setting functions (behavior) in the state doesn't seem quite correct to me (maybe I'm the only one) but Yazid's alternative sounds like a really good approach.

Thanks.

Dave Ceddia
Dave Ceddiainstructor
~ 2 years ago

Putting the functions in state is actually what the official docs recommend (see here) but I really like Yazid's idea and I think that would work. You could even use the new useMemo hook and avoid having to import a library or write your own memoize.

Lukas Pospisil
Lukas Pospisil
~ 2 years ago

Question please Do I have to put the state inside the constructor to improve performance, isn't enough to keep it without constructore??

Dave Ceddia
Dave Ceddiainstructor
~ 2 years ago

Lukas - you can initialize state outside the constructor, and that's what I normally do too, but if you do that you have to make sure that any of the arrow function-style class methods that you want to put into state are defined before the state = { ... } line. To me, it looks a bit weird to have state initialized anywhere other than right at the top, so that's why I put it in the constructor for this lesson.

Lukas Pospisil
Lukas Pospisil
~ 2 years ago

Thanks for answer, the course is awesome!

Dave Ceddia
Dave Ceddiainstructor
~ 2 years ago

FYI: The 'before' code for this lesson is here if you need it.

Raquel
Raquel
~ 2 years ago

Awesome course! I really love it!

Herbert Pimentel
Herbert Pimentel
~ 2 years ago

Thanks for this amazing content.

Hakan Karaduman
Hakan Karaduman
~ 2 years ago

That was great optimization tips, thanks so much for it.

Jaini Guevara
Jaini Guevara
~ 2 years ago

Thank you, quick and informative content!

Philip
Philip
~ 2 years ago

I love your vscode theme, What are you using?

Dave Ceddia
Dave Ceddiainstructor
~ 2 years ago

@Philip - the theme is Sarah Drasner's Night Owl