Comment mettre à jour l'etat en fonction de sa valeur actuelle dans un composant fonctionnel React ?

Question

Vous avez un composant fonctionnel qui utilise les hooks useState et useEffect. Quelle est la manière correcte de mettre à jour l'état en fonction de la valeur actuelle de cet état afin d'éviter des problèmes de concurrence ?

Accepted Answer

En utilisant une fonction de mise à jour dans setState :
```
const [count, setCount] = useState(0);
setCount(prevCount => prevCount + 1);
```

Answer

En combinant useState avec useEffect :
```
const [count, setCount] = useState(0);
useEffect(() => {
  setCount(count + 1);
}, [count]);
```

Answer

En utilisant la syntaxe classique de useState :
```
const [count, setCount] = useState(0);
setCount(count + 1);
```

Answer

En utilisant le hook useReducer au lieu de useState :

```
const initialState = { count: 0 };
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      throw new Error();
  }
}
const [state, dispatch] = useReducer(reducer, initialState);
dispatch({ type: 'increment' });
```

Question du test React ⚛️

Comment mettre à jour l'etat en fonction de sa valeur actuelle dans un composant fonctionnel React ?