Comment puis-je forcer un composant à effectuer un nouveau rendu avec des hooks dans React?

Question

Considérant l'exemple des crochets ci-dessous

    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>
        );
     }

Fondamentalement, nous utilisons la méthode this.forceUpdate () pour forcer le composant à se restituer immédiatement dans les composants de la classe React comme l'exemple ci-dessous

     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>
        }
 }

Mais ma requête est Comment puis-je forcer le composant fonctionnel ci-dessus à refaire le rendu immédiatement avec des hooks?

Answer 1

Alternative à la réponse de @ MinhKha:

Cela peut être beaucoup plus propre avec useReducer :

 const [, forceUpdate] = useReducer(x => x + 1, 0);

Usage: forceUpdate() - nettoyeur sans paramètres