Principales Hooks de React

1. useState

Definición: Permite guardar información que puede cambiar dentro de un componente y actualizar la interfaz cuando eso ocurre.

Ejemplo real: Un formulario de registro necesita conservar lo que el usuario escribe en el campo de nombre.

const [nombre, setNombre] = useState('');

<input
  value={nombre}
  onChange={e => setNombre(e.target.value)}
/>

Idea clave: useState sirve para guardar y actualizar la información del componente.

2. useEffect

Definición: Permite ejecutar una acción cuando el componente aparece o cuando cambia determinada información.

Ejemplo real: Al entrar a la pantalla de productos, necesitamos consultar los productos de una API.

useEffect(() => {
  fetch('/api/productos')
    .then(res => res.json())
    .then(data => setProductos(data));
}, []);

Idea clave: useEffect ejecuta acciones relacionadas con cambios o eventos externos.

3. useContext

Definición: Permite compartir información entre varios componentes sin tener que enviarla manualmente mediante props.

Ejemplo real: Una aplicación tiene un usuario autenticado y varios componentes necesitan conocer su nombre.

const usuario = useContext(UsuarioContext);

return <p>Hola, {usuario.nombre}</p>;

Idea clave: useContext permite acceder a información compartida.

4. useReducer

Definición: Permite organizar de forma centralizada los cambios de un estado cuando existen varias acciones posibles.

Ejemplo real: Un carrito de compras puede agregar productos, eliminarlos y cambiar cantidades.

const [carrito, dispatch] = useReducer(reducer, []);

dispatch({
  type: 'AGREGAR_PRODUCTO',
  producto
});

Idea clave: useReducer controla estados con varias acciones.

5. useRef

Definición: Permite conservar una referencia o un valor entre renders sin provocar una actualización de la interfaz al modificarlo.

Ejemplo real: Queremos enfocar automáticamente el buscador cuando se abre una pantalla.

const buscadorRef = useRef(null);

useEffect(() => {
  buscadorRef.current.focus();
}, []);

<input ref={buscadorRef} />

Idea clave: useRef conserva referencias o valores que no necesitan provocar un render.

6. useMemo

Definición: Permite conservar el resultado de un cálculo para no tener que repetirlo sin motivo.

Ejemplo real: Tenemos miles de productos y queremos mostrar únicamente los que coinciden con una búsqueda.

const productosFiltrados = useMemo(() => {
  return productos.filter(producto =>
    producto.nombre.includes(busqueda)
  );
}, [productos, busqueda]);

Idea clave: useMemo conserva el resultado de un cálculo.

7. useCallback

Definición: Permite conservar una función para evitar crear una versión nueva de ella en cada render cuando esto sea relevante para el rendimiento.

Ejemplo real: Un componente padre pasa una función de selección a una lista de productos optimizada.

const seleccionarProducto = useCallback((id) => {
  setProductoSeleccionado(id);
}, []);

<ProductoLista onSelect={seleccionarProducto} />

Idea clave: useCallback conserva una función entre renders.

8. useLayoutEffect

Definición: Permite ejecutar una acción relacionada con el tamaño o la posición de un elemento antes de que el navegador muestre el resultado visual.

Ejemplo real: Necesitamos conocer el tamaño de un menú para calcular dónde colocar un elemento emergente.

const menuRef = useRef(null);

useLayoutEffect(() => {
  const ancho = menuRef.current.offsetWidth;
  console.log(ancho);
}, []);

Idea clave: useLayoutEffect trabaja con medidas y posición del DOM antes de mostrar el resultado.

Lección aprendida

Los Hooks permiten que un componente funcional maneje distintas necesidades de una aplicación de forma organizada.

Las palabras clave que debes recordar son: useState, useEffect, useContext, useReducer, useRef, useMemo, useCallback y useLayoutEffect.

© Arturo Juárez Monroy