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

  • 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 ) }}class App extends React.Component { render() { ThemeProvider ThemeContext.Consumer…
  • The React team will remove the warning about context being an experimental feature because it’s now a “first-class feature” of the framework.
  • But even when we do feel it, we’ll have a solid, core React API to lean on to help us avoid the problem.Practical ContextOne question that I’ve seen a lot about the new context API (or the render prop pattern in general) is how to compose providers and consumers together….
  • Here’s an example:const ThemeContext = ThemeProvider extends React.Component {/* code */}const ThemeConsumer = ThemeContext.Consumerconst LanguageContext = React.createContext(‘en’)class LanguageProvider extends React.Component {/* code */}const LanguageConsumer = AppProviders({children}) { return ( LanguageProvider ThemeProvider {children} /ThemeProvider /LanguageProvider )}function { return ( LanguageConsumer {language = ( ThemeConsumer {theme = children({language, theme})} /ThemeConsumer )} /LanguageConsumer…
  • 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.

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 and poof, it’s accessible/importable anywhere. But then you have trouble with updates (you have to…

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