useState
En React, el estado es mucho más que solo un conjunto de datos; es la "memoria" interna del componente, que le permite "recordar" información y reaccionar a los cambios de forma automática. Veamos más en profundidad por qué es necesario rastrear el estado y cómo funciona.
¿Por qué es necesario rastrear el estado en un componente?
Rastrear el estado en un componente es esencial porque nos permite que el componente sea dinámico y reactivo. Esto significa que el componente puede actualizar su interfaz en respuesta a cambios internos o externos sin tener que rehacerse completamente o actualizarse de forma manual.
Veamos algunos puntos clave:
1.-Mantener la interfaz actualizada: Cuando el estado cambia, React vuelve a "pintar" (renderizar) solo aquellas partes de la interfaz que dependen de ese estado. Esto es importante para crear aplicaciones interactivas donde los datos pueden cambiar con las acciones del usuario, como al hacer clic en botones, escribir en formularios o cargar nuevos datos desde el servidor.
2.-Reactivos a eventos y acciones del usuario: El estado permite que un componente "reaccione" a eventos como clics, cambios en formularios o temporizadores. Si un componente no rastreara el estado, estos cambios no se verían reflejados en la interfaz del usuario de forma automática.
3.-Separación de lógica y visualización: En una aplicación React, el estado maneja la lógica de los datos internos del componente, mientras que la visualización se encarga de mostrar esos datos. Cuando el estado cambia, React gestiona cómo se debe actualizar la interfaz visual para que el usuario vea el nuevo estado de los datos.
¿Cómo useState ayuda a rastrear el estado en un componente?
Considera una aplicación de tareas donde se muestran tareas pendientes. Aquí, necesitamos rastrear dos datos:
La lista de tareas que se deben mostrar en la pantalla.
El valor de una nueva tarea que se esté escribiendo en un campo de entrada.
Sin el estado, cada vez que agregáramos una tarea o modificáramos el texto, tendríamos que redibujar toda la lista manualmente. Con el estado, React maneja esto automáticamente.
import React, { useState } from 'react';
function Tareas() {
const [tareas, setTareas] = useState([]); // Lista de tareas
const [nuevaTarea, setNuevaTarea] = useState(''); // Tarea que se escribe en el input
const agregarTarea = () => {
setTareas([...tareas, nuevaTarea]); // Actualiza el estado de "tareas"
setNuevaTarea(''); // Limpia el input
};
return (
<div>
<input
type="text"
value={nuevaTarea}
onChange={(e) => setNuevaTarea(e.target.value)}
placeholder="Escribe una tarea"
/>
<button onClick={agregarTarea}>Agregar tarea</button>
<ul>
{tareas.map((tarea, index) => (
<li key={index}>{tarea}</li>
))}
</ul>
</div>
);
}
¿Qué hace exactamente useState?
useState es un hook en React que permite a los componentes funcionales tener un estado propio. Cada vez que llamas a setState (la función que devuelve useState), React:
Detecta que el estado ha cambiado.
Calcula cómo afecta esto a la interfaz del componente.
Vuelve a renderizar el componente automáticamente para reflejar el cambio.
Así, useState permite mantener y rastrear el estado sin requerir código adicional para hacer actualizaciones manuales en el DOM.
El estado de un componente en React es una estructura de datos que representa información sobre ese componente en un momento dado. Esta información puede cambiar con el tiempo, y cuando lo hace, React vuelve a renderizar el componente para reflejar el cambio en la interfaz de usuario. En otras palabras, el estado permite que el componente "recuerde" valores entre renderizados.
Características clave del estado en un componente
1.-Es local y específico del componente: Cada componente en React puede tener su propio estado, independiente del estado de otros componentes.
2.-Es mutable: El estado puede cambiar, lo que es útil para valores que evolucionan con la interacción del usuario (como un contador, un campo de formulario, o el estado de conexión de un usuario).
3.-Es reactivo: Cuando el estado cambia, React vuelve a renderizar automáticamente el componente para que la interfaz de usuario esté actualizada.
Ejemplo básico
Imaginemos un componente sencillo de contador. Aquí, el estado sería el valor numérico del contador, que cambia cada vez que el usuario hace clic en un botón para incrementar el contador. React manejará la actualización de la interfaz de usuario para mostrar el nuevo valor del contador en pantalla cada vez que cambie.
import React, { useState } from 'react';
function Contador() {
const [contador, setContador] = useState(0); // Definimos el estado "contador" con valor inicial de 0
return (
<div>
<p>Contador: {contador}</p>
<button onClick={() => setContador(contador + 1)}>Incrementar</button>
</div>
);
}
Cuando usas useState, creas una "pieza" de estado y una función para actualizar ese estado. Aquí está la sintaxis básica:
import React, { useState } from 'react';
function ComponenteEjemplo() {
// Define una variable de estado llamada `contador` y una función `setContador` para actualizarla
const [contador, setContador] = useState(0);
// Renderiza el valor del contador y un botón para incrementar
return (
<div>
<p>El contador está en: {contador}</p>
<button onClick={() => setContador(contador + 1)}>Incrementar</button>
</div>
);
}
import { useState } from "react";
import ReactDOM from "react-dom/client";
function FavoriteColor() {
const [color, setColor] = useState("red");
return <h1>My favorite color is {color}!</h1>
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);import { useState } from "react";
import ReactDOM from "react-dom/client";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);import { useState } from "react";
import ReactDOM from "react-dom/client";
function Car() {
const [brand, setBrand] = useState("Ford");
const [model, setModel] = useState("Mustang");
const [year, setYear] = useState("1964");
const [color, setColor] = useState("red");
return (
<>
<h1>My {brand}</h1>
<p>
It is a {color} {model} from {year}.
</p>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);import { useState } from "react";
import ReactDOM from "react-dom/client";
function Car() {
const [car, setCar] = useState({
brand: "Ford",
model: "Mustang",
year: "1964",
color: "red"
});
return (
<>
<h1>My {car.brand}</h1>
<p>
It is a {car.color} {car.model} from {car.year}.
</p>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);import { useState } from "react";
import ReactDOM from "react-dom/client";
function Car() {
const [car, setCar] = useState({
brand: "Ford",
model: "Mustang",
year: "1964",
color: "red"
});
const updateColor = () => {
setCar(previousState => {
return { ...previousState, color: "blue" }
});
}
return (
<>
<h1>My {car.brand}</h1>
<p>
It is a {car.color} {car.model} from {car.year}.
</p>
<button
type="button"
onClick={updateColor}
>Blue</button>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
Comentarios
Publicar un comentario