Explorando los ganchos de React y las innovaciones de React 19

Hooks revolucionó el desarrollo de React al permitir que los componentes funcionales administren con elegancia el estado, los efectos secundarios y la lógica compleja. Con React 19, se introdujeron nuevos ganchos para optimizar aún más el flujo de trabajo. En este artículo, exploraremos los ganchos clásicos, los ganchos avanzados y las novedades de la versión 19 con ejemplos prácticos.

Ganchos de reacción básicos

useState: Gestión de estado simple

Gestiona estados locales en componentes funcionales. Ideal para valores que cambian con el tiempo.

Ejemplo: contador interactivo

importar {useState} desde 'reaccionar';

función Contador() { const [recuento, setCount] = useState(0);

regresar (

useEffect: efectos secundarios

Ejecuta código después de la renderización, como llamadas API o manipulación DOM.

Ejemplo: Obteniendo datos de una API

importar {useState, useEffect} de 'reaccionar';

función Lista de usuarios() { const [usuarios, setUsers] = useState([]);

utilizarEfecto(() => { buscar ('https://api.example.com/usuarios') .entonces(respuesta => respuesta.json()) .then(datos => setUsers(datos)); }, []); // Ejecutar solo una vez

regresar (

{usuarios.map(usuario => (
• {user.name}
))}

useContext: intercambio de estado global

Accede a valores de contexto sin necesidad de profundizar.

Ejemplo: Tema oscuro/claro

importar {createContext, useContext, useState} desde 'reaccionar';

const ThemeContext = crearContext();

función aplicación() { const [tema, setTheme] = useState('luz');

regresar ( <ThemeContext.Valor del proveedor=> </ThemeContext.Provider> ); }

función barra de herramientas() { const {tema, setTheme} = useContext(ThemeContext);

regresar ( <botón onClick={() => setTheme(tema === 'claro'? 'oscuro': 'claro')}> ¿Cambiar al tema {tema === 'luz'? 'oscuro': 'claro'} </botón> ); }

useRef: Referencias mutables

Almacena valores que persisten entre renderizaciones sin provocar nuevas renderizaciones.

Ejemplo: centrarse en la entrada

importar {useRef} desde 'reaccionar';

función Entrada de texto() { const inputRef = useRef(nulo);

entrada de enfoque constante = () => { inputRef.current.focus(); };

regresar (

Ganchos avanzados y personalizados

useReducer: Estado complejo

Gestiona estados con una lógica más elaborada, similar a Redux.

Ejemplo: Lista de tareas

importar {useReducer} desde 'reaccionar';

function todosReducer(estado, acción) { cambiar (tipo.acción) { caso 'ADD_TODO': return [...estado, {texto: acción.texto, completado: falso}]; caso 'TOGGLE_TODO': devolver estado.map((todo, índice) => índice === acción.index? { ...todo, completado: !todo.completado } : todo ); predeterminado: estado de retorno; } }

función TodoApp() { const [todos, despacho] = useReducer(todosReducer, []);

const handleSubmit = (e) => { e.preventDefault(); despacho({ tipo: 'ADD_TODO', texto: e.target.elements.todo.value }); e.objetivo.reset(); };

regresar (

useMemo y useCallback: optimización del rendimiento

• useMemo: Memoriza los valores calculados.
• useCallback: Memoriza funciones.

Ejemplo: Cálculo pesado

importar {useMemo, useState} desde 'reaccionar';

función ComponenteCaro({ lista }) { const listaclasificada = useMemo(() => { console.log('Lista de pedidos...'); return [...lista].sort(); }, [lista]);

return

Ganchos personalizados: reutilización de lógica

Ejemplo: useFetch para solicitudes HTTP

importar {useState, useEffect} de 'reaccionar';

función useFetch(url) { const [datos, setData] = useState(nulo); const [cargando, setLoading] = useState(true);

utilizarEfecto(() => { buscar (url) .entonces(res => res.json()) .entonces(datos => { establecerDatos(fecha); setLoading(falso); }); }, [URL]);

devolver {datos, cargando}; }

// Uso en el componente: función Perfil de usuario ({ ID de usuario }) { const {datos: usuario, cargando} = useFetch(https://api.example.com/users/${userId});

if (cargando) return

Nuevos ganchos de React 19

useOptimistic: Actualizaciones optimistas

Actualiza la interfaz de usuario antes de la confirmación del servidor y se revierte en caso de falla.

Ejemplo: adición de comentarios optimistas

importar {useOptimistic} desde 'reaccionar';

función Formulario de comentario({ onSubmit }) { const [comentarios optimistas, agregar comentario optimista] = useOptimistic( [], (estado, nuevo comentario) => [... estado, {texto: nuevo comentario, enviando: verdadero}] );

const handleSubmit = async (e) => { e.preventDefault(); const formData = nuevo FormData(e.target); comentario constante = formData.get('comentario');

addOptimisticComment(comentario);

prueba {
  esperar al enviar (comentario);
} captura (error) {
  // Revertir la interfaz de usuario si la solicitud falla
}

};

regresar (

useResource: Integración con Suspense

Gestiona datos asincrónicos de forma declarativa.

Ejemplo: carga de datos con respaldo

importar {useResource, Suspense} desde 'reaccionar';

función buscarUsuario(id) { // Devuelve una promesa }

función Perfil de usuario ({ ID de usuario }) { const userResource = useResource(() => fetchUser(userId));

devolver

// Uso en el componente principal: <Suspense fallback={