Adam Klein

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?

State management in a world of hooks
#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

Introducing the Reusable library and its architecture

The Reusable library uses a `createStore` function to run native hooks in a dummy component, enabling direct subscriptions without Context.

#9about 4 minutes

Live demo of refactoring local state to a shared store

A live demonstration shows how to easily convert a component's local state into a global, shared store using the Reusable library.

#10about 2 minutes

Live demo of using selectors and composing stores

The demo continues by implementing selectors to optimize re-renders and shows how one store can seamlessly use data from another.

#11about 1 minute

Final thoughts on choosing the right development tools

A concluding thought emphasizes choosing tools that fit your team's needs, as today's hottest trend often becomes tomorrow's legacy code.

Related jobs
Jobs that call for the skills explored in this talk.

job ad

Saby Company
Delebio, Italy

Intermediate

test

Milly
Vienna, Austria

Intermediate

Matching moments

Implementing global state with React's Context API
10:42 MIN

Implementing global state with React's Context API

Rethinking React State Management: The Power of Built-In Solutions

Conclusion: Benefits of using React's built-in tools
22:16 MIN

Conclusion: Benefits of using React's built-in tools

Rethinking React State Management: The Power of Built-In Solutions

Understanding the internal mechanics of React hooks
02:15 MIN

Understanding the internal mechanics of React hooks

Dos and don'ts with react hooks. An opinionated approach

Architecting the solution with the React Context API
11:58 MIN

Architecting the solution with the React Context API

Build UIs that learn - Discover the powerful combination of UI and AI

Managing local state and the problem of prop drilling
04:23 MIN

Managing local state and the problem of prop drilling

Rethinking React State Management: The Power of Built-In Solutions

Managing async state with React 19 hooks
14:01 MIN

Managing async state with React 19 hooks

Building Interactive Async UI with React 19 and Ariakit

Example: Combining Context, useReducer, and transformers
17:38 MIN

Example: Combining Context, useReducer, and transformers

Rethinking React State Management: The Power of Built-In Solutions

Lessons on testing, hooks, and framework lock-in
19:21 MIN

Lessons on testing, hooks, and framework lock-in

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned

Featured Partners

Related Videos

See all videos
Rethinking React State Management: The Power of Built-In Solutions23:39

Rethinking React State Management: The Power of Built-In Solutions

Marc Brehmer

Dos and don'ts with react hooks. An opinionated approach20:16

Dos and don'ts with react hooks. An opinionated approach

Daniel Espino Garcia

Building Interactive Async UI with React 19 and Ariakit25:22

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

Bringing back reactivity in "reactive" frontend28:43

Bringing back reactivity in "reactive" frontend

Michał Moroz

Challenges of building React and React Native apps24:10

Challenges of building React and React Native apps

Milica Aleksic & Stefan Nikolic

Multiple Ships to the Island - Micro Frontends & Island Architectures59:03

Multiple Ships to the Island - Micro Frontends & Island Architectures

Florian Rappl

React and the power of visualisation40:19

React and the power of visualisation

Daisy Muyldermans

NgRx Tips for Future-Proof Angular Apps26:58

NgRx Tips for Future-Proof Angular Apps

Marko Stanimirović

Related Articles

View all articles
CH
Chris Heilmann
WeAreDevelopers LIVE days are changing - get ready to take part
Starting with this week's Web Dev Day edition of WeAreDevelopers LIVE Days, we changed the the way we run these online conferences. The main differences are:Shorter talks (half an hour tops)More interaction in Q&AA tips and tricks "Did you know" sect...
WeAreDevelopers LIVE days are changing - get ready to take part
LM
Luis Minvielle
Top 5 React Form Libraries for Developers
React is still one of the most popular web frameworks in the world, and even if promising JavaScript building blocks like Svelte enter the contest occasionally, React gets credit among frontend developers for how easy it is to develop user interfaces...
Top 5 React Form Libraries for Developers
CH
Chris Heilmann
Dev Digest 136 - No JS(on) of mine
News and ArticlesDouglas Crockford is our featured video, so let's talk about evolving JavaScript and all things JSON. Judicious JSON explains all the weird things in it, you can learn why it can be incredibly slow, people wonder what even is a JSON ...
Dev Digest 136 - No JS(on) of mine

From learning to earning

Jobs that call for the skills explored in this talk.