Valores iniciales del estado

Puedes recibir un valor inicial por props y utilizarlo para crear el estado de una aparición del componente. Ese valor sirve de punto de partida; después el estado evoluciona con sus setters.

1import { useState } from 'react';
2
3interface Props {
4  initialValue?: number;
5}
6
7export default function Ejem_10({ initialValue = 200 }: Props) {
8  const [numero, setNumero] = useState(initialValue);
9
10  function handleIncrement() {
11    setNumero((prev) => prev + 1);
12  }
13
14  return (
15    <>
16      <p>{numero}</p>
17      <button onClick={handleIncrement}>Incrementar</button>
18      <button onClick={() => setNumero((prev) => prev - 1)}>Decrementar</button>
19      <button onClick={() => setNumero(initialValue)}>Restablecer</button>
20    </>
21  );
22}

Sin prop, el contador comienza en 200. Con <Ejem_10 initialValue={10} /> comienza en 10.

Inicial no significa sincronizado #

useState(initialValue) utiliza el valor para inicializar el estado al crear esa instancia. Si el padre cambia después la prop de 10 a 50, el contador no se reinicia automáticamente. Esto evita perder las interacciones que ya ha realizado el usuario.

El botón Restablecer sí solicita expresamente setNumero(initialValue). En este ejemplo utilizará el valor actual de la prop cuando se pulse.

Si quieres que el padre controle siempre el número, puedes diseñar un componente controlado que reciba el valor y una función para cambiarlo. No es necesario copiar toda prop a un estado local.

Inicialización con una función #

Si calcular el valor inicial requiere trabajo, puedes pasar una función: useState(() => calcularValorInicial()). React la utiliza al inicializar el componente. Esa función debe ser pura y puede ejecutarse dos veces en desarrollo con StrictMode para comprobarlo.

Prueba tú #

Muestra dos contadores con valores iniciales diferentes. Incrementa uno y comprueba que el otro no cambia. Después pulsa Restablecer.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.