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.

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

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

Why React developers naturally transition to React Native
01:33 MIN

Why React developers naturally transition to React Native

Challenges of building React and React Native apps

Using essential community libraries and basic components
05:52 MIN

Using essential community libraries and basic components

Building Better Apps with React Native

Understanding React fundamentals for the examples
05:01 MIN

Understanding React fundamentals for the examples

How to become an AI toolsmith

Introduction to JavaScript design patterns
00:03 MIN

Introduction to JavaScript design patterns

10 must-know design patterns for JS Devs

Implementing advanced state management with NgRx
37:33 MIN

Implementing advanced state management with NgRx

Angular Unleashed: Mastering Modern Web Development with Angular

Explaining the core concepts of Redux state management
06:49 MIN

Explaining the core concepts of Redux state management

Hello generics, goodbye boilerplate!

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

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

Bringing back reactivity in "reactive" frontend28:43

Bringing back reactivity in "reactive" frontend

Michał Moroz

NgRx Tips for Future-Proof Angular Apps26:58

NgRx Tips for Future-Proof Angular Apps

Marko Stanimirović

React and the power of visualisation40:19

React and the power of visualisation

Daisy Muyldermans

From learning to earning

Jobs that call for the skills explored in this talk.