matthamil / react-context

(つ°ヮ°)つ Understanding React Context

(つ ° ヮ °)つ Understanding React Context

A repo containing different ways to manage state in React with simple examples.

How to use this repo

You've heard about the Context API. You're ready to start using it. Here's a friendly step-by-step progression to using context to manage some portion of your state in your production app.

Each flavor of state management is under a separate branch:

1. Component State (setState)
2. Redux
3. Context
4. Nested Context
5. Unstated (this is awesome ✨)

Checkout each branch one-by-one and run yarn run start (or npm run start) to see the app in action.

⚠️ This repo is not an endorsement of using context for all of your state management problems. Obligatory Tweet from Dan Abramov:

Helpful Resources

1. awesome-react-context
2. Unstated
3. Context API RFC
4. Context API pull request

Practice using Context

But Matt, I want to understand Context better! What can I do?

Well, you can read about some of the resources above ☝️. You can also try to extend the app in this repo by doing the following exercises:

1. Extend the Context example to use a product category context to choose which type of products are rendered in the product list.
2. Extend the Unstated example to use the a currency context like the one in the Nested Context example.
3. Create a PR and fix my bad code.
4. Follow me on Twitter.