javascript - función setState de React

¿Cuál es la diferencia entre estas dos funciones de actualización de estado y cuál es el enfoque recomendado? Ambas funciones funcionan bien en mi aplicación.

Opción 1

const [profile, setProfile] = useState<{name: string, age: number}>({
    name: 'John Doe',
    age: 28,
  });

setProfile((prevState) => {
    return {
      ...prevState,
      age: profile.age + 100,
    }
  });

Opción 2

const [profile, setProfile] = useState<{name: string, age: number}>({
    name: 'John Doe',
    age: 28,
  });

setProfile({
    ...profile,
    age: profile.age + 100,
  });

Respuesta #1

Normalmente, cada vez que quieras actualizar tu estado basado en tu estado previo, deberías usar la forma funcional de actualizar el estado. Esto asegura que el estado actual que estás pasando es la 'última versión'.

Cuando quieres establecer un estado basado en un valor diferente, sin depender del estado anterior, puedes 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 combina las actualizaciones. Además, según la documentación:

A diferencia del método setState que se encuentra en los componentes de clase, useState no combina automáticamente los objetos de actualización. Puedes replicar este comportamiento combinando la forma de función del actualizador con la sintaxis de propagació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 tienes un cambio de estado que aparezca antes de otro cambio de estado, pero puede suceder en casos más complejos o al usar funciones useEffect o setTimeout, y en este caso la actualización funcional es obligatoria.

Respuesta #2

Básicamente son lo mismo, pero el segundo enfoque se usa cuando no puedes asegurar que tienes el valor actualizado de tu estado a la mano. Por ejemplo, en un callback de setTimeout o useEffect