FEI-5465.4: Lesson 2 - Prevent Context From Rerendering #4
Conversation
kevinbarabash
changed the title
| const Foo = () => { | ||
| const {foo} = useContext(FooBarContext); | ||
| return <h1>foo = {foo}</h1>; | ||
| }; | ||
|
|
||
| const Bar = () => { | ||
| const {bar} = useContext(FooBarContext); | ||
| return <h1>bar = {bar}</h1>; | ||
| }; |
There was a problem hiding this comment.
hmmm this example is confusing to me, because in fact both child components are using the context. I think the point would be clearer if Bar didn't use the context at all, but did some expensive render-time computation (and had a Date.now() rendered for good measure).
There was a problem hiding this comment.
That's good feedback. I'll update the example. Is the Date.now() to show when it was last rendered so its easier for people to see when a component isn't being rendered?
There was a problem hiding this comment.
This example never gets rendered so I'm not sure how useful the Date.now() would be.
There was a problem hiding this comment.
oh yeah, if it's not actually run then the date.now isn't needed
There was a problem hiding this comment.
Also, the expensive render-time computation case is covered by Lesson #1. This particular lesson is showing how using Context can often result in unnecessary renders.
kevinbarabash
force-pushed
the
fei-5465.4
branch
from
148347b to
25f36f8
Compare
Summary:
Lesson 2 shows how to minimize context induced re-renders by having the context store an instance of an event emitter that never gets replaced. Changes to the state in the context are now effected by emitting event and listening for them.
Issue: FEI-5465
Test plan:
exercise
solution
