Marc Brehmer

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

Are external state libraries slowing you down? See how to build a powerful and lightweight state management system using only native React features.

Rethinking React State Management: The Power of Built-In Solutions
#1about 4 minutes

What is state management and why is it important

State management is crucial for application functionality and user experience because it ensures data consistency and improves performance.

#2about 3 minutes

Managing local state and the problem of prop drilling

Using the useState hook for local component state can lead to prop drilling, where state is passed down through many layers of components.

#3about 4 minutes

Using an external library like Recoil for global state

External libraries like Recoil offer a global state solution using atoms and selectors to avoid prop drilling and manage shared state.

#4about 2 minutes

Implementing global state with React's Context API

React's built-in Context API provides a way to create a global state without external dependencies, avoiding prop drilling.

#5about 2 minutes

Challenges of Context API and Recoil for state management

Both the Context API and Recoil can introduce performance issues, complexity like 'context hell', and the risk of overusing global state.

#6about 2 minutes

Simplifying state logic with state transformers

State transformers are pure functions that encapsulate state modification logic, making updates more maintainable, testable, and reusable.

#7about 5 minutes

Example: Combining Context, useReducer, and transformers

A practical example shows how to manage user authentication by combining the Context API for global access, useReducer for predictable updates, and state transformers for logic.

#8about 1 minute

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

Using React's native tools for state management reduces dependencies, improves performance with a smaller bundle size, and offers flexibility.

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

Matching moments

The challenge of managing local versus global state
00:17 MIN

The challenge of managing local versus global state

State management in a world of hooks

Using the React Context API for shared state
07:47 MIN

Using the React Context API for shared state

State management in a world of hooks

How popular JavaScript libraries implement reactivity
06:51 MIN

How popular JavaScript libraries implement reactivity

Bringing back reactivity in "reactive" frontend

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

Explaining the core concepts of Redux state management

Hello generics, goodbye boilerplate!

Understanding React fundamentals for the examples
05:01 MIN

Understanding React fundamentals for the examples

How to become an AI toolsmith

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

Live demo of refactoring local state to a shared store
20:27 MIN

Live demo of refactoring local state to a shared store

State management in a world of hooks

Introducing the Reusable library and its architecture
17:48 MIN

Introducing the Reusable library and its architecture

State management in a world of hooks

Featured Partners

Related Videos

See all videos
State management in a world of hooks28:10

State management in a world of hooks

Adam Klein

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

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

Daniel Espino Garcia

Bringing back reactivity in "reactive" frontend28:43

Bringing back reactivity in "reactive" frontend

Michał Moroz

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

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

André Kovac

Challenges of building React and React Native apps24:10

Challenges of building React and React Native apps

Milica Aleksic & Stefan Nikolic

Building Better Apps with React Native23:09

Building Better Apps with React Native

Marc Rousavy

Keith Cirkle of GitHub on React Fatigue49:32

Keith Cirkle of GitHub on React Fatigue

Keith Cirkle

The Journey of a Pixel in a React Application27:01

The Journey of a Pixel in a React Application

Shem Magnezi

Related Articles

View all articles
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
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
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
DC
Daniel Cranney
Dev Digest 195: End of Likes, JavaScript’s a Zoo, and Messing with Bots!
Inside last week’s Dev Digest 195 . 👎 No more external likes 🤗 Needy programs 📉 The worst selling Microsoft product 🟨 JavaScript engines zoo 🍞 No more toasts! 🤖 Messing with bots 👔 Beware of fake job interviews 🗞️ Join over 150,000 developers alread...
Dev Digest 195: End of Likes, JavaScript’s a Zoo, and Messing with Bots!

From learning to earning

Jobs that call for the skills explored in this talk.

Programador/a React?

Programador/a React?

knowmad Mood
Municipality of Palma, Spain

Intermediate
GIT
RxJS
SASS
NoSQL
Redis
+10