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

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.

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.

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.

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

[State Management]

NONE.

【Summary】

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】
NONE.