Twitter | Search | |
Brian Vaughn
I heard some feedback yesterday that it was confusing to migrate from the old React context API to the new one, so I put together a quick before and after example: Old API: New API: New API with HOC:
An online editor tailored for web application development.
CodeSandbox CodeSandbox @codesandboxapp
Reply Retweet Like More
Señor Saudades Apr 13
Replying to @brian_d_vaughn
Thank you!
Reply Retweet Like
Brian Vaughn Apr 13
Replying to @cdiddy42
No problem! Hope it's helpful!
Reply Retweet Like
Señor Saudades Apr 13
Replying to @brian_d_vaughn
I actually had no trouble but some of my colleagues have, so I will point them to this!
Reply Retweet Like
Señor Saudades Apr 13
Replying to @brian_d_vaughn
I really admire your teams ability to communicate and engage people. It’s by far one of the nicest hidden features of React ☝🏼
Reply Retweet Like
Brian Vaughn Apr 13
Replying to @cdiddy42
Thanks! 😄
Reply Retweet Like
Wizard Cat Apr 13
Replying to @brian_d_vaughn
I thought the old "DON'T USE CONTEXT" disclaimer was meant specifically so that you didn't have to do things like this in the future. 😂
Reply Retweet Like
Brian Vaughn Apr 13
Replying to @colshacol
Context is a pretty necessary feature for certain types of things (e.g. localization, theming, routing) so over time, people began depending on the API- even though it was unstable. This is understandable! It's unfortunate it took us so long to release an official version, but 🙂
Reply Retweet Like
Alex Apr 13
Replying to @brian_d_vaughn
So awesome to know that I was able to contribute! Thanks very much for this, I hope others find it useful! 😁
Reply Retweet Like
Christian de Botton Apr 14
Is there a preferred way to pass down, in this example, the method which toggles the context value down to its children through context? It’s easy to imagine scenarios with theming where you may want to switch from dark to light through, say, a page transition.
Reply Retweet Like
Pål Nes Apr 14
Shouldn't most people still stay clear, you know, it should be used by librarians and stuff?
Reply Retweet Like
Brian Vaughn Apr 14
Replying to @cdebotton @dan_abramov
Yeah. You could just store an object in state, like: theme = { value: "dark", changeTheme: this.changeTheme }
Reply Retweet Like
Brian Vaughn Apr 14
Replying to @cdebotton @dan_abramov
(and pass the whole object down) Alternately, you could use a separate context for the theme toggler. Then components that doesn't want to toggle it could just use the one with the current theme value.
Reply Retweet Like
Brian Vaughn Apr 14
Replying to @pal_nes @dan_abramov
Context is useful for application things too, like localization or theme. I think it's fine to use if you have a use case that fits nicely with it.
Reply Retweet Like
Brian Vaughn Apr 14
Replying to @cdebotton @dan_abramov
For example (in case that didn't make sense):
Reply Retweet Like
Pål Nes Apr 14
Of course, I've just encountered codebases of old where people used context instead of props. Still think it should come with a giant neon warning sign.
Reply Retweet Like
Brian Vaughn Apr 14
Replying to @pal_nes @dan_abramov
That's fair. Our docs do have a medium sized warning sign about this. 🙂
Reply Retweet Like
Brian Vaughn Apr 14
Replying to @brian_d_vaughn
One more example in this series. This one shows how you might let a descendant in the tree request a theme change:
Reply Retweet Like
artalar Apr 18
Replying to @brian_d_vaughn
Look at "create-context.js"
Reply Retweet Like