¡No más estados confusos! Gestiona el estado en React correctamente

Gestionar el estado en React puede complicarse si no eliges la herramienta adecuada para cada caso.

El truco

ANTES (mal uso):

// Intentando gestionar estado global con useState
import React, { useState } from 'react';

function App() {
  const [user, setUser] = useState(null);

  return (
    <div>
      <UserProfile user={user} />
      <LoginButton setUser={setUser} />
    </div>
  );
}

function UserProfile({ user }) {
  return <div>{user ? `Hello, ${user.name}` : "Please log in"}</div>;
}

function LoginButton({ setUser }) {
  return <button onClick={() => setUser({ name: "John Doe" })}>Log In</button>;
}

DESPUÉS (bien uso):

// Usando Context para estado global
import React, { createContext, useContext, useState } from 'react';

const UserContext = createContext();

function App() {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <UserProfile />
      <LoginButton />
    </UserContext.Provider>
  );
}

function UserProfile() {
  const { user } = useContext(UserContext);
  return <div>{user ? `Hello, ${user.name}` : "Please log in"}</div>;
}

function LoginButton() {
  const { setUser } = useContext(UserContext);
  return <button onClick={() => setUser({ name: "John Doe" })}>Log In</button>;
}

La clave es entender cuándo usar cada herramienta: useState para estados locales, Context para compartir estado entre componentes cercanos, y bibliotecas como Zustand para una gestión de estado global más compleja. El mal uso de useState para estados compartidos puede llevar a duplicidad y desorden en el código.

Elige sabiamente tu herramienta de gestión de estado y mantén tu código limpio y eficiente.