Normalmente, cada vez que desee actualizar su estado en función de su estado anterior, debe usar la forma funcional de actualizar el estado. Se asegura de que el estado actual que está pasando sea el de la 'última versión'.

Cuando desee establecer un estado basado en un valor diferente, sin depender del estado anterior, puede establecer el estado directamente sin usar la actualización funcional.

Está bastante bien explicado con ejemplos en la documentación:

https://reactjs.org/docs/hooks-reference.html#usestate

la documentación incluye este gran ejemplo:

 function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( <> Count: {count} <button onClick={() => setCount(initialCount)}>Reset</button> <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button> <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button> </> ); }

Tenga en cuenta que, a diferencia de setState en un componente de clase, useState no fusiona la actualización, también de la documentación:

A diferencia del método setState que se encuentra en los componentes de clase, useState no fusiona automáticamente los objetos de actualización. Puede replicar este comportamiento combinando el formulario de actualización de funciones con la sintaxis de distribución de objetos:

 const [state, setState] = useState({}); setState(prevState => { // Object.assign would also work return {...prevState, ...updatedValues}; });

La opción 2 funcionará en la mayoría de los casos porque rara vez aparece un cambio de estado antes de otro cambio de estado, pero puede ocurrir en casos más complejos o usando las funciones useEffect o setTimeout y en este caso la actualización funcional es obligatoria.

Son básicamente lo mismo, pero el segundo enfoque se usa cuando no puede asegurarse de tener a mano el valor actualizado de su estado. Por ejemplo, en una devolución de llamada setTimeout o useEffect