Performantly Render a Large List of Items with React Context
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.
great course!
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)} >...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.
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.
Question please Do I have to put the state inside the constructor to improve performance, isn't enough to keep it without constructore??
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.
Thanks for answer, the course is awesome!
FYI: The 'before' code for this lesson is here if you need it.
Awesome course! I really love it!
Thanks for this amazing content.
That was great optimization tips, thanks so much for it.
Thank you, quick and informative content!
I love your vscode theme, What are you using?
@Philip - the theme is Sarah Drasner's Night Owl