[解決済み] Reactのフックでコンポーネントを強制的に再レンダリングするにはどうしたらいいですか？

質問

以下のフックの例で考えてみます。

   import { useState } from 'react';

   function Example() {
       const [count, setCount] = useState(0);

       return (
           <div>
               <p>You clicked {count} times</p>
               <button onClick={() => setCount(count + 1)}>
                  Click me
               </button>
          </div>
        );
     }

Reactクラスのコンポーネントでは、基本的にthis.forceUpdate()メソッドを使用して、以下の例のようにコンポーネントを直ちに再レンダリングするように強制しています。

    class Test extends Component{
        constructor(props){
             super(props);
             this.state = {
                 count:0,
                 count2: 100
             }
             this.setCount = this.setCount.bind(this);//how can I do this with hooks in functional component 
        }
        setCount(){
              let count = this.state.count;
                   count = count+1;
              let count2 = this.state.count2;
                   count2 = count2+1;
              this.setState({count});
              this.forceUpdate();
              //before below setState the component will re-render immediately when this.forceUpdate() is called
              this.setState({count2: count
        }

        render(){
              return (<div>
                   <span>Count: {this.state.count}></span>. 
                   <button onClick={this.setCount}></button>
                 </div>
        }
 }

しかし、私のクエリは、どのように私はフックですぐに再レンダリングするために、上記の機能コンポーネントを強制することができますか？

どのように解決するのですか？

で可能です。 useState または useReducer であるため useState は useReducer 内部的に :

const [, updateState] = React.useState();
const forceUpdate = React.useCallback(() => updateState({}), []);

forceUpdate は、通常の状況では使用されることを意図しておらず、テストやその他の未解決の場合にのみ使用されることを意図しています。このような状況には、より一般的な方法で対処することができます。

setCount が不適切に使用されている例です。 forceUpdate , setState はパフォーマンス上の理由から非同期であり、状態の更新が正しく行われなかったからといって、同期を強制されるべきではありません。もし状態が以前に設定された状態に依存しているなら、これは アップデータ機能 ,

もし、前の状態を元に状態を設定する必要がある場合は、以下のupdater引数について読んでください。

<...>

updater関数が受け取るstateとpropsの両方が保証されます。 は最新でなければならない。アップデータの出力は浅く 状態になります。

setCount というのは、目的がはっきりしないので、例にはならないかもしれませんが、これはアップデータ機能の場合です。

setCount(){
  this.setState(({count}) => ({ count: count + 1 }));
  this.setState(({count2}) => ({ count2: count + 1 }));
  this.setState(({count}) => ({ count2: count + 1 }));
}

これは、コールバックとして使われる関数はメモ化した方が良いという例外を除いて、フックに1:1で翻訳されています。

   const [state, setState] = useState({ count: 0, count2: 100 });

   const setCount = useCallback(() => {
     setState(({count}) => ({ count: count + 1 }));
     setState(({count2}) => ({ count2: count + 1 }));
     setState(({count}) => ({ count2: count + 1 }));
   }, []);