Search by

    State Management in React.

    created_at:October 08, 2022

    updated_at:October 08, 2022

    Today, I am going to explain State Management process in React.

    Purposes of this article creation

    • To be able to create Component in React on my own.
    • To be able to do Component design.
    • To be able to do State Management.

    State Management Process

    In this case, I will create Component for a SNS task management application on ?? as a deliverable.

    【What is State Management?】

    • State is the data of the application, and values are updated in real time by user operations and event occurrences. State management is to manage it.
      • Example of state: products in a shopping cart on an e-commerce site.

    Types of State Management

    • Management with local state (useState, useReducer (HooksAPI))
      • useState enables use of state in function components, the same as using state in Class (= local state).
    • Management with useReducer and useContext in Hooks API
    • Management with Redux and Recoil


    • useState and useReducer are local states

      • useState: Simple state management (primitive type, one-dimensional).
      • useReducer: Complex state management (object).
    • useContext (React Context API): global state management.

      • React Context can be created in multiple ways, so it is difficult to maintain data flow.
      • If you don’t implement memoization, you may end up in re-rendering hell.
    • useReducer: Local state & when you want to manipulate the next state based on the previous state.

      • useReducer in combination with React Context can be used to create a datastore design similar to Redux.

    What is Context?

    • Function to easily implement a datastore that can be used commonly in specified parts of the component tree, avoiding the Prop Drilling.
      • Designed to share data such as current authenticated users, themes, preferred languages, etc.
      • Context is commonly used in combination with state.
      • Since state used to require a class component, it is now recommended to use useContext from Hooks.


    • Redux is powerful when the application scales up to a certain degree and requires horizontal interaction between components that are not parent-child relationships.
    • For large and complex web applications, useReducer and Redux at the same time may be considered for performance optimization and business logic isolation.
    • When using Redux, it is recommended to adopt a design pattern such as re-ducks to reduce the complexity of tightly-coupled files.


    • useReducer is used to optimize the performance of components that update their state in multiple layers.
      • useState for simple state switching.
      • useReducer should be used for state operations that involve complex logic.


    • Recoil is an experimental state management library proposed by Facebook to solve the following limitations and problems of Context API.
      • If you try to complete state management using only React, you will have to use Context API to manage the application state.
      • To change the state of a React component managed by the Context API, you have to go back to the ancestor component and update the tree.
      • If the original component is large, the tree to be updated will also be large, which increases the difficulty of controlling re-rendering.
      • If not managed properly, large tree updates can cause performance degradation or unintentional resetting of the component state.

    Want to manage global state management while maintaining data flow in a large project

    • Manage with a single data store: Redux
    • Multiple data stores: Recoil

    Other Tips

    • For small-scale applications such as personal projects and prototypes, one option is to not design the store itself.


    [State Management]

    Word Explanation


    Summary/What I learned this time


    • There are few best practices when it comes to state management in React, and Redux is the library of choice that was ultimately left over after a process of elimination.
    • With the advent of Hooks, it is now possible to distribute responsibility to some extent, but for applications above a certain size, you should consider adopting Redux.

    【What I learned this time】

    © 2022, rubicon44TechBlog All rights reserved.