State management in a world of hooks

What if you could turn a local useState hook into performant, global state without the dreaded provider hell?

#1about 3 minutes

The challenge of managing local versus global state

Using hooks for local state and libraries like Redux for global state creates two mental models and makes refactoring difficult.

#2about 1 minute

Aligning local and global state management patterns

One solution is to use global state patterns, like `useReducer`, for local component state to create a consistent development experience.

#3about 4 minutes

How hooks enable superior code reusability

Hooks' reliance on call order and co-location makes it simple to extract logic into custom hooks, unlike refactoring traditional reducers.

#4about 2 minutes

Using the React Context API for shared state

The React Context API provides a native way to manage shared state using hooks, as seen in Facebook's own UI.

#5about 2 minutes

Understanding the performance drawbacks of React Context

In large applications, Context can lead to deep provider nesting and performance issues from unnecessary re-renders across the component tree.

#6about 2 minutes

The future of React Context with selectors

A proposed RFC for `useContext` aims to solve performance problems by adding a selector argument to prevent components from re-rendering unnecessarily.

#7about 4 minutes

Designing an ideal hook-based state management API

The evolution of a new state management API explored initial attempts using string keys and custom hook implementations before finding a better solution.

#8about 3 minutes