構成部品管理の情報が多すぎたり、他の構成部品との接続によって依存性が増加したりすると、stateなどのステータス管理が必要になります.
ただし、redoxやmobxのようなライブラリを導入する場合、ステータス管理の規模が大きくない場合は、redux hookで簡単に解決できます.

useReducer

useReducerの代替関数(state,action)=>としてreduceをnewStateとして受信し、dispatchメソッドとペアとして現在の状態のhookを返す.
複数のサブアイテム値を含む静的論理を作成する場合、または次のステータスが前のステータスに依存する場合、useStateではなくuseStateが通常選択されます.
1つのコンポーネントでuserreducerを使用する場合は構いませんが、複数のコンポーネントで使用する必要がある場合はcustom hooksとして作成して使用できます.

// useCounterReducer.js

import React, {useReducer} from "react";

const reducer = (oldState, action) => {
	switch(action.type) {
    	case: "INCREASE:
        	return oldState + action.number;
        case: "DECREASE:
        	return oldState - action.number;
        case: "RESET":
        	return oldState = 0;
      default:
        return oldState;
    }
}

const useCountReducer = () => {
  	// useReducer 함수의 첫 번째 인자는 reducer 함수고 두 번째 값은 초기 state값입니다.
	const [count, countDispatch] = useReducer(reducer, 0);
  
  	return {count, countDispatch}
}

useReducer custom hookと呼んで使います

import React from "react";
import useCountReducer from "./useCountReducer";

const App = () => {
  const { count, countDispatch } = useCountReducer();
  const onIncrease = () => countDispatch({ type: "INCREASE", number: 1 });
  const onDecrease = () => countDispatch({ type: "DECREASE", number: 1 });
  const onReset = () => countDispatch({ type: "RESET" });
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={onIncrease}>INCREASE</button>
      <button onClick={onDecrease}>DECREASE</button>
      <button onClick={onReset}>RESET</button>
    </div>
  );
};

export default App;

countという情報は1つの場所で管理できますが、任意の構成部品でフックをカスタマイズしてアクセスおよび変更できます.
さらに、親-子構成部品間のpropsは、propsによる再レンダリングを防止するために依存性を解消する可能性があります.
次に、実際のコードの動作例を示します.