El gancho useState de React es una herramienta esencial para gestionar el estado en componentes funcionales, pero es fácil tropezar con algunos errores comunes. Ya sea que estés comenzando con React o hayas estado trabajando con él por un tiempo, evitar estos errores puede salvarte de errores inesperados y problemas de rendimiento.

Repasemos 10 errores frecuentes y cómo puedes evitarlos para escribir código más limpio y eficiente.

1. Tipo de estado inicial incorrecto

Uno de los problemas más comunes surge cuando el tipo de estado inicial no coincide con el tipo esperado durante las actualizaciones de estado.

❌ Error: No coincide el tipo de estado inicial

const [count, setCount] = useState(0);
setCount("1"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.

✅ Solución: use TypeScript o especifique el tipo explícitamente.

const [count, setCount] = useState(0);
setCount(1); // No issues now.

2. No utilizar actualizaciones funcionales

Al actualizar el estado en función del valor anterior, hacer referencia directa al estado actual puede generar valores obsoletos, especialmente en operaciones asíncronas.

❌ Error: usar el estado actual directamente

setCount(count   1); // Can cause bugs in async scenarios.

✅ Solución: Utilice el formulario funcional para actualizaciones seguras.

setCount((prevCount) => prevCount   1); // Ensures you always have the latest value.

3. Almacenamiento del estado derivado

Evite almacenar valores en estados que puedan derivarse de otros estados o accesorios. Esto puede provocar repeticiones innecesarias y problemas de sincronización.

❌ Error: almacenar el estado derivado

const [count, setCount] = useState(0);
const [doubleCount, setDoubleCount] = useState(count * 2);

✅ Solución: derivar el valor durante el renderizado en lugar de usar el estado.

const [count, setCount] = useState(0);
const doubleCount = count * 2; // No need to store this in state.

4. Actualizaciones de estado dentro de la fase de renderizado

Llamar a setState dentro de la fase de renderizado es una receta para bucles infinitos y problemas de rendimiento.

❌ Error: configurar el estado durante el renderizado

const [count, setCount] = useState(0);
setCount(1); // Infinite loop!

✅ Solución: Activar cambios de estado en controladores de eventos o efectos.

const handleClick = () => setCount(1);

5. Estado de mutación directa

React no detectará cambios si mutas el estado directamente, especialmente con matrices u objetos.

❌ Error: estado mutante directamente

const [items, setItems] = useState([1, 2, 3]);
items.push(4); // Mutation happens here, React won’t re-render!

✅ Solución: devolver una nueva matriz u objeto para activar la repetición de renderizados.

setItems((prevItems) => [...prevItems, 4]); // Spread to create a new array.

6. Tipos indefinidos o incorrectos para estados complejos

Cuando se trata de estados complejos, no definir los tipos adecuados puede causar confusión y problemas de tiempo de ejecución.

❌ Error: los tipos implícitos pueden provocar errores

const [user, setUser] = useState({ name: "", age: 0 });
setUser({ name: "John", age: "thirty" }); // Type error: Age should be a number.

✅ Solución: Defina la forma del estado con los tipos correctos.

type User = { name: string; age: number };
const [user, setUser] = useState({ name: "", age: 0 });

7. Uso del estado para valores mutables (como temporizadores)

El uso de useState para valores que no afectan el renderizado, como los temporizadores, genera renderizados innecesarios.

❌ Error: usar el estado para valores mutables

const [timerId, setTimerId] = useState(null);

✅ Solución: use useRef para valores mutables que no necesitan volver a representarse.

const timerIdRef = useRef(null);

8. No fusionar objetos de estado correctamente

A diferencia de los componentes de clase, useState no fusiona actualizaciones automáticamente. Olvidar esto puede resultar en la sobrescritura de partes de su estado.

❌ Error: sobrescribir el estado en lugar de fusionarlo

const [user, setUser] = useState({ name: '', age: 0 });
setUser({ age: 25 }); // The 'name' field is now lost!

✅ Solución: use el operador de extensión para fusionar actualizaciones de estado.

setUser((prevUser) => ({ ...prevUser, age: 25 })); // Merges with existing state.

9. Uso del estado para actualizaciones de alta frecuencia

El seguimiento de valores de alta frecuencia, como las dimensiones de la ventana en el estado, puede causar problemas de rendimiento debido a una repetición excesiva.

❌ Error: usar el estado para actualizaciones frecuentes

const [size, setSize] = useState(window.innerWidth);
window.addEventListener("resize", () => setSize(window.innerWidth));

✅ Solución: use useRef o antirrebote para reducir el impacto en el rendimiento.

const sizeRef = useRef(window.innerWidth);
useEffect(() => {
  const handleResize = () => {
    sizeRef.current = window.innerWidth;
  };
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

10. Suponiendo que las actualizaciones de estado sean sincrónicas

Las actualizaciones de estado de React son asincrónicas, pero muchos desarrolladores suponen erróneamente que los cambios se aplican inmediatamente.

❌ Error: asumir que los cambios de estado son inmediatos

setCount(count   1);
console.log(count); // Logs the old value, not the updated one!

✅ Solución: utilice useEffect para realizar un seguimiento de los cambios de estado y garantizar que se utilice el valor más reciente.

useEffect(() => {
  console.log(count); // Logs the updated value after re-render.
}, [count]);

¿Pensamientos finales?

Evitar estos errores de useState hará que su código React sea más robusto, legible y eficaz. Comprender cómo funciona el mecanismo de estado de React y conocer las mejores prácticas le ahorrará tiempo depurando y mejorará su experiencia de desarrollo general.

¿Tiene algún consejo útil o error para compartir? ¡Déjalos en los comentarios a continuación! ?