State Management in React.

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

Overview

• 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

• 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

• 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

• 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.

References

[State Management]

• 「【JavaScript】「状態管理」や「Flux」とは？」：http://www.code-magagine.com/?p=10042
• 「「状態管理」って何？」：https://zenn.dev/gagaga/articles/state-management
• 「Reactの新しい状態管理ライブラリ 「Recoil」とは？ Reduxとの違いを解説」：https://ics.media/entry/210224/

Word Explanation

NONE.

Summary/What I learned this time

【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.