React’s ⚛️ new Context API – DailyJS – Medium

#ReactJS’s ⚛️ new Context #API:  by @kentcdodds #JavaScript

  • Here’s the simplest useful example I can come up with: – Here’s an even simpler version so you don’t have to open the codesandbox: – const ThemeContext = ThemeProvider extends React.Component { – state = {theme: ‘light’} – render() { – return ( – ThemeContext.Provider value={this.state.theme} – {this.props.children} – /ThemeContext.Provider…
  • , but if that’s not your jam, you could easily implement a Higher Order Component or something else using the context API (which is why it’s the best).
  • The React team will remove the warning about context being an experimental feature because it’s now a “first-class featureâ€� of the framework.
  • Here’s an example: – const ThemeContext = ThemeProvider extends React.Component {/* code */} – const ThemeConsumer = ThemeContext.Consumer – const LanguageContext = LanguageProvider extends React.Component {/* code */} – const LanguageConsumer = AppProviders({children}) { – return ( – LanguageProvider – ThemeProvider – {children} – /ThemeProvider – /LanguageProvider – ) -…
  • react-fns: Browser API’s turned into declarative React components and HoC’s by Jared Palmer ğŸ‘�react-composer: Compose render prop components (what I use in the codesandbox above) by jmeasreact-contextual: Tiny helper around Reacts new context API by Paul HenschelSome tweets from this last week: – P.S.

It’s way more ergonomic, it’s no longer “experimental,” and it’s now a first-class API! OH, AND IT USES A RENDER PROP! NOTE: This is a cross-post from my newsletter. I publish each email to my blog…

React’s ⚛� new Context APIIt’s way more ergonomic, it’s no longer “experimental,� and it’s now a first-class API! OH, AND IT USES A RENDER PROP!

NOTE: This is a cross-post from my newsletter. I publish each email to my blog two weeks after it’s sent. Subscribe to get more content like this earlier right in your inbox! 💌

Have you heard of the context API in React? If you’ve heard of it, are you like many others afraid to use it directly because you saw this in the official docs:

The first result of that search is showing “Why Not To Use Context�. Doesn’t inspire a whole lot of confidence in the context API. To make things even more concerning, that section says:

If you want your application to be stable, don’t use context. It is an experimental API and it is likely to break in future releases of React.So why use context?Have you ever experienced the pain of trying to get state from the top of your react tree to the bottom? This pain you’re feeling is called “prop drilling� and it’s super annoying. You wind up having to pass props through components that don’t care about the data just so you can send it down to components that do care. And as you move components around this pain is magnified.

You could actually use a regular JavaScript module to avoid these problems. Just put the data in a singleton module…

React’s ⚛️ new Context API – DailyJS – Medium