Hacker News new | comments | show | ask | jobs | submit login
A curated list of stuff related to the new React Context API (github.com)
32 points by diegohaz 4 months ago | hide | past | web | favorite | 7 comments



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)

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 :)


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.


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?


Mark Erikson (dev on React) explains this very well: 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."


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-t...


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_r...


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




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: