5 ms·

A curated list of stuff related to the new React Context API

32 points by diegohaz 8y ago

cdata 8y ago
This list looks great. I watched the Wes Bos intro video, and it was a nice high-level overview. Thanks for putting this together. Speaking as someone already familiar with Redux, React Context seems to be conceptually similar to how I already use Redux in practice (+/- expressing the store and connections as components). Can anyone with better familiarity enumerate the important differences this new API comes with?
- deadcoder0904 8y ago
  Do not make the mistake of comparing Redux with new Context API Read the 1st comment in the thread [0] for explanation [0]: https://www.reddit.com/r/reactjs/comments/84d4m5/heres_how_reacts_new_context_api_works_by_wes_bos https://www.reddit.com/r/reactjs/comments/84d4m5/heres_how_r...
- mephitix 8y ago
  Mark Erikson (dev on React) explains this very well: http://blog.isquaredsoftware.com/2018/03/redux-not-dead-yet/ http://blog.isquaredsoftware.com/2018/03/redux-not-dead-yet/. "If you're only using Redux to avoid passing down props, context could replace Redux - but then you probably didn't need Redux in the first place. Context also doesn't give you anything like the Redux DevTools, the ability to trace your state updates, middleware to add centralized application logic, and other powerful capabilities that Redux enables."
- diegohaz 8y ago
  As I wrote in this article [0], I strongly believe that the new Context API can replace Redux in most apps, not because it's a Redux replacement, but mostly because they didn't need Redux in the first place. People start their projects with Redux without knowing if they'll actually need it. [0] https://medium.freecodecamp.org/reacts-new-context-api-how-to-toggle-between-local-and-global-state-c6ace81443d0 https://medium.freecodecamp.org/reacts-new-context-api-how-t...
swyx 8y ago
Its really great that the team has finally solved this longstanding "hacky" API - for some historical perspective, the context api existed for a long time completely undocumented. Here's Michael Jackson of React Router fame telling the story of how he discovered the old context api (about 10 mins in: https://www.youtube.com/watch?v=kS8utR_Rp2Q https://www.youtube.com/watch?v=kS8utR_Rp2Q) One thing I dont really get about the old vs new context API is the ability to "just" use the implicit context without having to import the consumer. Notice all the examples usually are single file so you dont see the seams but you used to be able to pull off your context property just by declaring it: ``` class Button extends React.Component { render() { return ( <button style={{background: this.context.color}}> {this.props.children} </button> ); } } Button.contextTypes = { color: PropTypes.string }; ``` now you have to import: ``` import ColorContext from '../ColorContext' // this is new class Button extends React.Component { render() { return ( <ColorContext.Consumer> {color => ( <button style={{background: color}}> {this.props.children} </button> )} </ColorContext.Consumer> ); } } ``` i know the react team probably thought long and hard about this and explicit dependency injection is probably a good thing but boy i miss the "lightweight" feel of the old api :)
- diegohaz 8y ago
  The old context was indeed easier to use, but I think the new API is more explicit. It's easier to infer from where things are coming. It has great value in maintainability.
hoodoof 8y ago
I'd like to see an example for storing current user info.

32 points by diegohaz 8y ago

This list looks great. I watched the Wes Bos intro video, and it was a nice high-level overview. Thanks for putting this together. Speaking as someone already familiar with Redux, React Context seems to be conceptually similar to how I already use Redux in practice (+/- expressing the store and connections as components). Can anyone with better familiarity enumerate the important differences this new API comes with?

deadcoder0904 8y ago
Do not make the mistake of comparing Redux with new Context API Read the 1st comment in the thread [0] for explanation [0]: https://www.reddit.com/r/reactjs/comments/84d4m5/heres_how_reacts_new_context_api_works_by_wes_bos https://www.reddit.com/r/reactjs/comments/84d4m5/heres_how_r...
mephitix 8y ago
Mark Erikson (dev on React) explains this very well: http://blog.isquaredsoftware.com/2018/03/redux-not-dead-yet/ http://blog.isquaredsoftware.com/2018/03/redux-not-dead-yet/. "If you're only using Redux to avoid passing down props, context could replace Redux - but then you probably didn't need Redux in the first place. Context also doesn't give you anything like the Redux DevTools, the ability to trace your state updates, middleware to add centralized application logic, and other powerful capabilities that Redux enables."
diegohaz 8y ago
As I wrote in this article [0], I strongly believe that the new Context API can replace Redux in most apps, not because it's a Redux replacement, but mostly because they didn't need Redux in the first place. People start their projects with Redux without knowing if they'll actually need it. [0] https://medium.freecodecamp.org/reacts-new-context-api-how-to-toggle-between-local-and-global-state-c6ace81443d0 https://medium.freecodecamp.org/reacts-new-context-api-how-t...

swyx 8y ago

Its really great that the team has finally solved this longstanding "hacky" API - for some historical perspective, the context api existed for a long time completely undocumented. Here's Michael Jackson of React Router fame telling the story of how he discovered the old context api (about 10 mins in: https://www.youtube.com/watch?v=kS8utR_Rp2Q https://www.youtube.com/watch?v=kS8utR_Rp2Q) One thing I dont really get about the old vs new context API is the ability to "just" use the implicit context without having to import the consumer. Notice all the examples usually are single file so you dont see the seams but you used to be able to pull off your context property just by declaring it: ``` class Button extends React.Component { render() { return ( <button style={{background: this.context.color}}> {this.props.children} </button> ); } } Button.contextTypes = { color: PropTypes.string }; ``` now you have to import: ``` import ColorContext from '../ColorContext' // this is new class Button extends React.Component { render() { return ( <ColorContext.Consumer> {color => ( <button style={{background: color}}> {this.props.children} </button> )} </ColorContext.Consumer> ); } } ``` i know the react team probably thought long and hard about this and explicit dependency injection is probably a good thing but boy i miss the "lightweight" feel of the old api :)

diegohaz 8y ago
The old context was indeed easier to use, but I think the new API is more explicit. It's easier to infer from where things are coming. It has great value in maintainability.

hoodoof 8y ago

I'd like to see an example for storing current user info.