DEV Community: Julian Kaymer Agama Tanta

🧬Hooks de React: useReducer

Julian Kaymer Agama Tanta — Sat, 19 Apr 2025 17:13:35 +0000

📦 ¿Qué es useReducer?

Es un hook que te permite manejar estados complejos o con múltiples transiciones de forma predecible y organizada.

✅ Úsalo cuando:

Tienes múltiples subvalores en el estado
El siguiente estado depende del anterior
Quieres mover la lógica de actualización a una función separada

🧪 Sintaxis básica

const [state, dispatch] = useReducer(reducer, initialState);

reducer: una función (state, action) => newState
initialState: estado inicial
dispatch: función que usas para lanzar acciones

🧠 ¿Qué es un reducer en JavaScript?

Antes de seguir aventurándonos en el useReducer, conozcamos las bases.
Un reducer es una función que toma una colección de elementos (como un array) y los reduce a un único valor, he ahí el nombre de reducer (reductor en español).

🧪 Sintaxis básicas

Se tiene 2 valores, un callback y un valor inicial .

const resultado = array.reduce(callback, valorInicial)

Sintaxis del callback

(acumulador, valorActual) => {}

acumulador: Guardará en un inicio el valor inicial que se le paso al reduce, y luego según se opere.
valorActual: El elemento actual del array que estamos procesando

Ejemplo

const numeros = [1, 2, 3, 4];

const suma = numeros.reduce((acumulador, valorActual) => {
  return acumulador + valorActual;
}, 0); // El 0 es el valor inicial del acumulador

console.log(suma); // 10

Y el .reduce() hace algo así internamente:

acumulador = 0 (valor inicial)
1 → acumulador = 0 + 1 = 1
2 → acumulador = 1 + 2 = 3
3 → acumulador = 3 + 3 = 6
4 → acumulador = 6 + 4 = 10

Entendiendo esto, podemos pasar a:

¿Cómo puedo aplicar el useReducer en mi proyecto?

Imaginemos que tenemos un formulario con 3 pasos:

Información personal (name, email)
Dirección (country, city)
Revisión y envío

Vamos a controlar:

Los datos del formulario,
El paso actual,
Acciones para avanzar, retroceder o actualizar datos.

🔧 Lógica del reducer y tipado

// 🧱 Tipos del estado
type FormData = {
  name: string;
  email: string;
  country: string;
  city: string;
};

type State = {
  currentStep: number;
  data: FormData;
};

// 🎯 Tipos de acciones
type Action =
  | { type: 'NEXT_STEP' }
  | { type: 'PREV_STEP' }
  | { type: 'UPDATE_FIELD'; field: keyof FormData; value: string }
  | { type: 'RESET_FORM' };

// 🎛️ Estado inicial
const initialState: State = {
  currentStep: 0,
  data: {
    name: '',
    email: '',
    country: '',
    city: '',
  },
};

// 🔄 Reducer
function formReducer(state: State, action: Action): State {
  switch (action.type) {
    case 'NEXT_STEP':
      return { ...state, currentStep: state.currentStep + 1 };
    case 'PREV_STEP':
      return { ...state, currentStep: state.currentStep - 1 };
    case 'UPDATE_FIELD':
      return {
        ...state,
        data: { ...state.data, [action.field]: action.value },
      };
    case 'RESET_FORM':
      return initialState;
    default:
      return state;
  }
}

🧠 ¿Cómo se usa en un componente?

const [state, dispatch] = useReducer(formReducer, initialState);

// Para avanzar
dispatch({ type: 'NEXT_STEP' });

// Para retroceder
dispatch({ type: 'PREV_STEP' });

// Para actualizar un campo
dispatch({ type: 'UPDATE_FIELD', field: 'email', value: 'ejemplo@email.com' });

// Para reiniciar el formulario
dispatch({ type: 'RESET_FORM' });

🧰 Bonus: 3er parámetro de useReducer

Este tercer parámetro es un parámetro opcional

const [state, dispatch] = useReducer(reducer, initialArg, init?);

reducer: la función reductora
initialArg: valor inicial del estado, que puede ser un estado directo o un argumento para construirlo
init(opcional): una función que inicializa el estado a partir de initialArg

🤔 ¿Para qué sirve el tercer parámetro?

Sirve para calcular el estado inicial de forma perezosa (lazy), es decir, solo se ejecuta una vez, al montar el componente.

Esto es útil cuando:

El estado inicial requiere cálculos pesados
Quieres construir el estado inicial desde una prop o valor externo
Quieres usar algo como JSON.parse(localStorage.getItem(...))

🧪 Ejemplo: Cargar estado desde `localStorage`

type State = { theme: 'light' | 'dark' };

function reducer(state: State, action: { type: 'TOGGLE_THEME' }): State {
  switch (action.type) {
    case 'TOGGLE_THEME':
      return { theme: state.theme === 'light' ? 'dark' : 'light' };
    default:
      return state;
  }
}

// Función init: se ejecuta una vez para calcular el estado inicial
function init(initialArg: string | null): State {
  const parsed = initialArg ? JSON.parse(initialArg) : null;
  return parsed ?? { theme: 'light' };
}

const [state, dispatch] = useReducer(reducer, localStorage.getItem('theme'), init);

🧠 Casos de uso comunes

Formularios con validación compleja
Manejo de múltiples estados relacionados
UIs con múltiples interacciones o pasos (wizards, tabs, etc.)

Fuentes y algunos artículos que quizá te interesen

¿Qué es el Virtual DOM? Virtual DOM con manzanitas 🍎

Julian Kaymer Agama Tanta — Thu, 17 Apr 2025 17:32:20 +0000

¿Alguna vez te has preguntado por qué frameworks como React son tan rápidos y eficientes al actualizar la interfaz de usuario? Una de las claves está en algo llamado Virtual DOM.

Pero no te preocupes, no vamos a meternos en un mar de términos técnicos desde el inicio. Imaginemos primero un escenario simple:

🍎 Imaginemos una canasta de manzanas...
Piensa que tienes una canasta con 5 manzanas. Un niño viene y se come una. Tú podrías revisar toda la canasta, manzana por manzana, para saber cuál falta. O… podrías haber anotado la posición de cada una y simplemente comparar lo que anotaste con lo que hay ahora. Mucho más rápido, ¿no?

Eso es básicamente lo que hace el Virtual DOM.

¿Qué es el DOM?

Document Object Model (DOM) es la estructura en forma de árbol que los navegadores crean a partir de tu HTML. Cada etiqueta, cada texto, cada imagen, es un nodo en ese árbol. Manipular este árbol directamente puede ser lento, sobre todo cuando hay muchos cambios pequeños.

Si eres más visual, esto te servirá, esto es el HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Ejemplo DOM</title>
  </head>
  <body>
    <h1>Hola Mundo</h1>
    <p>Esto es un párrafo</p>
  </body>
</html>

Y este sería su "árbol":

DOCUMENT
├── html
│   ├── head
│   │   └── title
│   │       └── "Ejemplo DOM"
│   └── body
│       ├── h1
│       │   └── "Hola Mundo"
│       └── p
│           └── "Esto es un párrafo"

¿Y cuáles son los nodos? Pues estos:

DOCUMENT: el nodo raíz (el documento entero)
ELEMENT: cada etiqueta HTML (, , etc.)
TEXT: el texto dentro de los elementos
ATTRIBUTE: atributos como class, id, etc. (no siempre se representan como nodos en todas las APIs)
COMMENT: comentarios en el HTML

Una forma de acceder a este sería:

const titulo = document.querySelector('h1');
console.log(titulo.nodeName); // "H1"
console.log(titulo.firstChild.nodeValue); // "Hola Mundo"

En entonces ¿Por qué no acceder al DOM de esta forma?

Modificar el DOM real constantemente, especialmente en apps dinámicas, puede generar muchos re-renderizados innecesarios. Esto impacta negativamente en el rendimiento.

Es acá donde nace el concepto de "Virtual DOM"

Virtual DOM 💡

El Virtual DOM es una copia ligera del DOM real, que vive en memoria. Cada vez que hay un cambio en tu app, React, Vue, etc, actualizan esta copia primero. Luego, hacen una comparación inteligente a la que se conoce como diffing (diferenciado) entre la versión antigua y la nueva del Virtual DOM, para detectar exactamente qué cambió. Finalmente, se aplican solo esos cambios mínimos al DOM real.

Esto hace que las actualizaciones sean mucho más rápidas y eficientes ⚡.

¿Cómo se vería el Virtual DOM?
En un ejemplo con React, este sería el Virtual DOM:

// React-style Virtual DOM node
const vdom = {
  type: 'div',
  props: {},
  children: [
    {
      type: 'h1',
      props: {},
      children: ['Hola'],
    },
    {
      type: 'p',
      props: {},
      children: ['Contador: 0'],
    },
  ],
};

Lo que básicamente se hace, es crear una versión actualizada del vDOM y compararla con la antigua.

¿Entonces el Virtual DOM es perfecto?

No. Aunque mejora mucho el rendimiento, no es "gratis", hay un costo de procesamiento en crear las copias y compararlas. Por eso en apps muy simples, puede no ser necesario. Pero para aplicaciones con muchas actualizaciones de interfaz, es una bendición.

Conclusión

El Virtual DOM es como una libreta con la posición de nuestras manzanas. No evita los cambios, pero los vuelve más inteligentes. En lugar de revisar toda la canasta, solo miramos lo justo y necesario.

Así, tus aplicaciones se mantienen rápidas, eficientes y agradables de usar.