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.

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

Challenges of building React and React Native apps24:10

Challenges of building React and React Native apps

Milica Aleksic & Stefan Nikolic

Practice makes perfect - when it comes to RxJS33:25

Practice makes perfect - when it comes to RxJS

Jan-Niklas Wortmann

React and the power of visualisation40:19

React and the power of visualisation

Daisy Muyldermans

Typescript, React and Atomic Design - a match made in heaven40:05

Typescript, React and Atomic Design - a match made in heaven

Nathalia Rus

Accessibility in React Application30:07

Accessibility in React Application

Julia Undeutsch

What the heck do "declarative" and "reactive" actually mean?30:40

What the heck do "declarative" and "reactive" actually mean?

André Kovac

From learning to earning

Jobs that call for the skills explored in this talk.

Programador/a React?

knowmad Mood
Municipality of Madrid, Spain

Intermediate
CSS
GIT
HTML
RxJS
SASS
+12