Logo

dev-resources.site

for different kinds of informations.

State Management Patterns in React

Published at
12/1/2023
Categories
react
state
context
redux
Author
this_mkhy
Categories
4 categories in total
react
open
state
open
context
open
redux
open
Author
9 person written this
this_mkhy
open
State Management Patterns in React

Hello developer! glad to see you again 👋

Introduction

Welcome, React enthusiasts! Building robust applications involves mastering the art of state management. In this article, we embark on a journey to demystify state management patterns in React. From local component state to advanced solutions like Redux, we'll unravel the concepts through examples that are both enlightening and easy to follow.

1. Local Component State

At the heart of React's simplicity lies local component state. Let's dive into the basics of using the useState hook to manage state within a component.

Example:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

Understanding local state is fundamental, especially for smaller components where managing state locally is efficient and straightforward.

2. Lifting State Up

As our applications grow, so does the need for shared state. Learn the art of lifting state up, a technique that allows components to share and synchronize state.

Example:

import React, { useState } from 'react';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  const decrementCount = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <ChildComponent count={count} onIncrement={incrementCount} onDecrement={decrementCount} />
    </div>
  );
};

const ChildComponent = ({ count, onIncrement, onDecrement }) => (
  <div>
    <p>Count: {count}</p>
    <button onClick={onIncrement}>Increment</button>
    <button onClick={onDecrement}>Decrement</button>
  </div>
);
Enter fullscreen mode Exit fullscreen mode

Lifting state up becomes invaluable when multiple components need access to the same state. It fosters a cohesive data flow across your application.

3. Context API

Enter the Context API, a powerful tool for managing global state without the need for prop drilling.

Example:

import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext();

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

const ChildComponent = () => {
  const { count, setCount } = useContext(MyContext);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

Context API shines in larger applications, providing a centralized hub for state management without the need to pass props through multiple layers.

4. Redux (State Management Library)

For larger applications with complex state logic, Redux steps in as a predictable state container. Let's take a peek into the Redux universe.

Example:

// Install required packages: redux, react-redux

// actions.js
export const increment = () => ({ type: 'INCREMENT' });
export const decrement = () => ({ type: 'DECREMENT' });

// reducers.js
const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

export default counterReducer;

// App.js
import React from 'react';
import { createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';
import counterReducer from './reducers';

const store = createStore(counterReducer);

const App = () => {
  return (
    <Provider store={store}>
      <CounterComponent />
    </Provider>
  );
};

const CounterComponent = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

Redux takes center stage in managing the state of larger applications, providing a structured and predictable flow for complex state logic.

Conclusion

Understanding state management patterns is the key to building scalable and maintainable React applications. From the simplicity of local component state to the structured predictability of Redux, each pattern serves a unique purpose.

In this article, we've navigated through fundamental and advanced state management patterns, offering you a toolkit to elevate your React development journey. Experiment with these patterns, explore their nuances, and choose the one that best aligns with your project's needs.

Happy coding, and may your React applications flourish with efficient state management!

References :

useState
Lifting State Up
useContext
Redux

state Article's
30 articles in total
Favicon
Svelte 5: Share state between components (for Dummies)
Favicon
Pampanga State Agricultural University
Favicon
Data Flow in LLM Applications: Building Reliable Context Management Systems
Favicon
Props and State in React
Favicon
Radar Market Innovations: Phased Array Solid-State Radar Development
Favicon
A single state for Loading/Success/Error in NgRx
Favicon
Advanced State Management - XState
Favicon
Top 7 Tips for Managing State in JavaScript Applications 🌟
Favicon
MithrilJS component with state management
Favicon
React State Management: When & Where add your states?
Favicon
STATE MANAGEMENT IN REACT
Favicon
State Management with Zustand
Favicon
A practical summary of React State variables & Props!
Favicon
State in React
Favicon
Weak memoization in Javascript
Favicon
Crafting a Global State Hook in React
Favicon
Reusing state management: HOC vs Hook
Favicon
State Vs Prop in React [Tabular Difference]
Favicon
Mastering XState Fundamentals: A React-powered Guide
Favicon
Does limiting state matter on the FrontEnd?
Favicon
Reducer vs. Finite State Machines: Understanding the Paradigm Shift
Favicon
A tool that can be used by anyone to manage React Query state externally
Favicon
Taming the State Beast: Redux vs. Recoil in React
Favicon
11 friends of state management in Angular
Favicon
React State Management
Favicon
How Can State Management Be Applied To A Real World Case-Scenario
Favicon
No more State Management with Signals
Favicon
How to keep state between page refreshes in React
Favicon
How to sync React state across tabs with workers
Favicon
State Management Patterns in React

Featured ones: