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

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

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

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

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

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
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
BR
Benjamin Ruschin
What Developers Really Need to Create Great Code Demos
Every developer on earth has, at some point, had another developer to thank for a breakthrough, a success, an aha moment they wouldn’t have had without coming across that blog post, that open-source contribution, that reply on socials or that humble ...
What Developers Really Need to Create Great Code Demos
S
SciChart
The Fastest JavaScript Charts - Built for React and Beyond
For most developers, browser charting works fine — until it doesn’t. Once you push beyond tens of thousands of points, add live streaming, or need advanced interactions, the story changes: frame drops, frozen dashboards, memory issues. That’s where S...
The Fastest JavaScript Charts - Built for React and Beyond
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

From learning to earning

Jobs that call for the skills explored in this talk.

React Developer

React Developer

The Sharing Group
Amsterdam, Netherlands

Remote
€4-5K
React
Next.js
TypeScript
+1