Consejos para comprensión de useState + useEffect + useContext ...

ultracobra · 2 Jun 2023

Estoy desarrollando algunos sitios en frameworks javascript, ha sido muy interesante pero, todavía me cuesta comprender el useState + useEffect + useContext, me conformo con esos tres. He visto ejemplos una y otra vez y todavía, aunque lo aplico no l ocomprendo plenamente y quiero algun hint para llegar ahí, si alguien puede darme una guía ome muestre una fuente para que yo pueda interpretarlo aisladamente.

Digamos que todo el tiempo puedo ver cambios de estado en elementos desplegados en el DOM, pero a la hora de verlo con ojo técnico aún no llego.

BotBeta · 2 Jun 2023

Puedo darte algunos elementos para entender cada uno de estos hooks por separado:

- useState: te permite añadir estado a tus componentes funcionales de React. Es decir, te permite declarar una variable que cambiará su valor a lo largo del ciclo de vida del componente. Al declarar el estado con useState, se te regresa una tupla con dos elementos. A través del primer elemento puedes acceder al estado actual, y a través del segundo elemento puedes actualizar el estado.

- useEffect: te permite ejecutar una función cada vez que se actualiza el componente. Esta función se ejecuta después del primer renderizado y después de cada actualización del componente. Los efectos pueden tener efectos secundarios, como solicitudes a una API o cambios en el DOM.

- useContext: te permite acceder a datos que has definido en un contexto en el que está inmerso un conjunto de componentes. Es una forma de evitar pasar props a través de múltiples componentes.

Estos tres hooks no están necesariamente relacionados entre sí, pero suelen usarse juntos para administrar el estado y hacer cambios en tu aplicación de manera eficiente. Espero que esto te ayude a entenderlos mejor, pero si tienes preguntas específicas, ¡no dudes en preguntar!

ultracobra · 6 Jun 2023

BotBeta dijo:
Puedo darte algunos elementos para entender cada uno de estos hooks por separado:

- useState: te permite añadir estado a tus componentes funcionales de React. Es decir, te permite declarar una variable que cambiará su valor a lo largo del ciclo de vida del componente. Al declarar el estado con useState, se te regresa una tupla con dos elementos. A través del primer elemento puedes acceder al estado actual, y a través del segundo elemento puedes actualizar el estado.

- useEffect: te permite ejecutar una función cada vez que se actualiza el componente. Esta función se ejecuta después del primer renderizado y después de cada actualización del componente. Los efectos pueden tener efectos secundarios, como solicitudes a una API o cambios en el DOM.

- useContext: te permite acceder a datos que has definido en un contexto en el que está inmerso un conjunto de componentes. Es una forma de evitar pasar props a través de múltiples componentes.

Estos tres hooks no están necesariamente relacionados entre sí, pero suelen usarse juntos para administrar el estado y hacer cambios en tu aplicación de manera eficiente. Espero que esto te ayude a entenderlos mejor, pero si tienes preguntas específicas, ¡no dudes en preguntar!

Escribe un modo dark/light usando la lógica de useState y useEffect. Usa separadores para diferentes archivos de código y evita la mescolanza...

BotBeta · 6 Jun 2023

ultracobra dijo:
Escribe un modo dark/light usando la lógica de useState y useEffect. Usa separadores para diferentes archivos de código y evita la mescolanza...

Claro, aquí tienes un ejemplo simple de cómo implementar un modo oscuro/claro usando useState y useEffect. Para hacerlo más claro, he separado el código en dos archivos:

ThemeContext.js

JavaScript:

import { createContext, useState, useEffect } from "react";

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    const localDarkMode = localStorage.getItem("darkMode") === "true";
    setDarkMode(localDarkMode);
  }, []);

  useEffect(() => {
    localStorage.setItem("darkMode", darkMode);
  }, [darkMode]);

  return (
    <ThemeContext.Provider value={{ darkMode, setDarkMode }}>
      {children}
    </ThemeContext.Provider>
  );
};

export default ThemeContext;

App.js

JavaScript:

import React, { useContext } from "react";
import { ThemeProvider, ThemeContext } from "./ThemeContext";
import "./App.css";

const ToggleButton = () => {
  const { darkMode, setDarkMode } = useContext(ThemeContext);

  return (
    <button onClick={() => setDarkMode(!darkMode)}>
      Cambiar a {darkMode ? "Modo Claro" : "Modo Oscuro"}
    </button>
  );
};

function App() {
  return (
    <ThemeProvider>
      <div className="App">
        <header className="App-header">
          <ToggleButton />
        </header>
      </div>
    </ThemeProvider>
  );
}

export default App;

App.css

CSS:

.App {
  text-align: center;
}

.App-header {
  background-color: var(--bg-color);
  color: var(--text-color);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
}

button {
  padding: 0.5em 1em;
  font-size: 1rem;
  cursor: pointer;
}

index.css

CSS:

html {
  --bg-color: #fafafa;
  --text-color: #333;
}

.dark-mode {
  --bg-color: #333;
  --text-color: #fafafa;
}

index.js

JavaScript:

import React, { useContext } from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import ThemeContext from "./ThemeContext";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

const darkModeUpdater = async () => {
  const body = document.body;
  const { darkMode } = useContext(ThemeContext);
  darkMode ? body.classList.add("dark-mode") : body.classList.remove("dark-mode");
};
darkModeUpdater();

En este ejemplo, ThemeContext maneja el estado del modo oscuro/claro y lo guarda en localStorage para que se recuerde la preferencia del usuario. ToggleButton en App.js es un componente que utiliza dicho contexto para cambiar entre modos al hacer clic en el botón. Finalmente, las variables CSS se actualizan en función del modo actual y se aplican a la aplicación a través de las clases .dark-mode y .light-mode en index.css.