react-context-api.md

React Context API

George Song (Twitter: @zukefresh, Github: @gsong)

• Need React >= v16.3.0
• State: Component → Context → Unstated → Redux/MobX/(etc)
• Two parts: <Provider /> and <Consumer />

How it works

1. Instantiate a context and receive a Provider and a Consumer
2. Set context values in the <Provider />
3. Extract value from <Consumer /> via a render prop (i.e., callback) that receives the value from the context

State can then be updated via callbacks (accessible from the context)

Unlike Redux (one store) context is meant to be as small as possible and specific to some focused part of the app.

Problems Context solves

• Imagine what we'd have to go through to manage the same state with Redux
• No prop-drilling, no giant central store
• Use-cases: context enables...
  • ...local "global" state
  • ..."compound" (i.e., composed) components
  • ..."nested" context (i.e., that depends on other context) -- easy to nest <Provider />s and <Consumer />s and react to changes in the outer context

Further Reading

• Presentation slides
• React Documentation: Context
• React Documentation: Render Props
• You Might Not Need Redux

Thanks, George!!