Redux vs Context API en React

Cursos Empresas Blog Live Conf Precios

Contenido del curso

No sé dónde empezar

Conceptos claves para empezar

Introducción a nuestro proyecto

¡Atraparlos ya!

7
Integrar PokeAPI con Axios en React
10:18 min

React.js + Redux

Middlewares

Avanzando la ui

Inmutabilidad

Avanzado

Despedida del curso

22
Reto final: filtro de Pokémon con Redux
02:13 min

Tomar examen

Redux vs Context API en React

Resumen

Si trabajas con React y tu árbol de componentes empieza a crecer, tarde o temprano vas a chocar con la pregunta de cuándo usar Redux o Context API para manejar el estado. Aquí te explico las diferencias clave, qué problema resuelven y cuál encaja mejor según el tipo de aplicación que estés construyendo.

¿Qué problema resuelven Redux y Context API en React?

En React, los datos viajan de componentes padres a hijos a través de props. El conflicto aparece cuando el componente que tiene los datos está separado por cinco o más niveles del componente que realmente los necesita.

Ese fenómeno se llama prop drilling y obliga a pasar propiedades por componentes intermedios que ni siquiera las usan. El resultado: un estado difícil de mantener, porque cada vez que agregas o eliminas un componente intermedio tienes que ajustar todos los props del camino [01:00].

¿Qué es prop drilling? Es cuando pasas props a través de varios componentes que no los usan, solo para que lleguen a un hijo profundo. Vuelve el código frágil y difícil de modificar.

La documentación de Redux lo resume así: cuando un sistema es opaco y no determinista, reproducir errores o agregar funcionalidades se vuelve un dolor de cabeza. Tanto Redux como Context API atacan ese problema, pero lo hacen de formas distintas.

¿Qué es Context API y cuándo conviene usarlo?

Context API es la solución nativa de React, disponible desde la versión 16.3, que permite pasar datos a través del árbol de componentes sin tener que recorrer manualmente cada nivel [02:30].

Según su propia documentación, Context está diseñado para compartir datos que pueden considerarse globales y que no cambian con frecuencia durante el uso de la aplicación.

Los casos típicos donde Context brilla son:

El modo de visualización, como light mode o dark mode.
Los datos del usuario autenticado.
El idioma preferido o el tema visual.

La idea es que sean valores que se setean una vez y rara vez se modifican mientras la persona usa el producto.

¿En qué se diferencian Redux y Context API punto por punto?

La comparación entre ambas soluciones cambia según el aspecto que mires. Aquí va el desglose [03:30].

Depuración, bundle size y middlewares

Redux trae un depurador que te permite viajar en el tiempo y revisar cada cambio de estado paso a paso. Context API, al estar todo conectado al mismo provider sin una descripción estándar de lo que cambia, complica más esa tarea.

En bundle size, el punto se lo lleva Context: viene integrado en React y no necesita librerías externas. Redux suma peso a tu aplicación porque es una dependencia adicional.

En cuanto a middlewares, Redux ofrece una forma sencilla de extender la funcionalidad de los dispatchers, interceptando datos antes de que modifiquen el estado. Context API no tiene un equivalente nativo para eso.

Curva de aprendizaje y rendimiento

Context API es mucho más ligero de aprender. Con Redux te toca asimilar un nuevo paradigma, entender el ciclo de vida de los datos y dominar una sintaxis más compleja.

El punto crítico está en el rendering. Redux previene renderizados innecesarios de fábrica, mientras que Context API tiende a re-renderizar todos los componentes suscritos al provider cuando algo cambia.

¿Cuál tiene mejor rendimiento, Redux o Context API? Redux, porque solo re-renderiza los componentes que consumen exactamente la parte del estado que cambió. Context API re-renderiza todo lo conectado al provider salvo que apliques optimizaciones manuales.

¿Cómo se ve la diferencia de renders en código real?

Para aterrizar esto, hay un ejemplo con tres componentes principales: Sparkles, Adder y Remover [05:30].

Sparkles renderiza tantas estrellitas como indique un contador. Adder dispara la acción Add Sparkle y Remover dispara Remove Sparkle. Cada componente imprime un log cada vez que se renderiza.

Esto es lo que ocurre al pulsar los botones:

Con Context API, al hacer clic en agregar o remover, los tres componentes se re-renderizan, aunque los botones no hayan cambiado en nada.
Con Redux, solo el componente Sparkles, que es el que realmente consume el dato modificado, se re-renderiza.
Adder y Remover quedan intactos en cada interacción cuando usas Redux.

En una app pequeña, esa diferencia parece menor. Pero cuando el árbol de componentes crece y la lógica se complica, esos renders extra empiezan a notarse en la experiencia del usuario.

¿Context API siempre tiene problemas de performance?

No necesariamente. Existen técnicas para evitar esos re-renders en Context, como dividir providers o memorizar valores. La diferencia es que Redux ya viene con esas optimizaciones por defecto, mientras que con Context te toca implementarlas tú.

La elección final depende del tamaño y la complejidad de tu aplicación. Si manejas datos globales que casi no cambian, Context API te da simplicidad y cero peso adicional. Si tu estado es complejo, cambia con frecuencia y necesitas trazabilidad, Redux te ahorra dolores de cabeza a largo plazo.

¿Tú con cuál te quedas para tu próximo proyecto en React? Cuéntame en los comentarios qué criterio usas para decidir.

Harold Zurita Simon

Estudiante

En React, normalmente pasamos datos de componentes padres a componentes hijos mediante propiedades, también llamadas props.

El problema surge cuando los componentes están a varios niveles de distancia, ocasionando el prop drilling, que consiste en pasar propiedades a componentes que no las van a usar, solo para que las reciban y se las transmitan al siguiente hijo, hasta que lleguen al componente destinatario. También surgen problemas si queremos eliminar un componente intermedio, ya que habría que eliminar ese prop de todos los componentes intermedios.

“Cuando un sistema es opaco y determinista, es difícil reproducir errores o agregar nuevas características.”

Sin embargo, React ofrece una solución llamada Context API. A continuación, vamos a comparar y analizar sus diferencias con Redux.

Context API

La Context API nos proporciona una forma de pasar datos de los componentes padres a los componentes hijos a través del árbol de componentes sin necesidad de hacerlo manualmente en cada nivel. Está diseñada para compartir datos que pueden considerarse globales.

Se recomienda utilizarla cuando necesitamos acceder o usar datos que no cambian con frecuencia durante la ejecución de la aplicación, como por ejemplo los datos del usuario autenticado. La Context API está disponible a partir de la versión 16.3 de React.

Diferencias entre Context API y Redux

Depuración: Redux cuenta con un depurador que permite viajar en el tiempo y observar los cambios de estado. En cambio, Context API puede ser un poco más difícil de depurar, ya que todo está conectado al mismo Provider y no existe una descripción clara y estándar de lo que está cambiando.
Tamaño del bundle: Context API tiene un tamaño de bundle menor, ya que viene integrado en React y no requiere librerías adicionales. Con Redux, el bundle de la aplicación aumenta ligeramente debido a la instalación de librerías externas.
Middlewares: Redux facilita la extensión de la funcionalidad de los dispatchers mediante middlewares, que permiten interceptar y manipular la información antes de que llegue a modificar el estado. Context API no tiene esta funcionalidad de forma nativa.
Curva de aprendizaje: Context API es más ligera y fácil de aprender. Redux requiere aprender un nuevo paradigma, entender el ciclo de vida de los datos y manejar una sintaxis más compleja.
Rendering: Redux permite prevenir renders innecesarios, optimizando la performance de la aplicación. Context API, por defecto, re-renderiza todos los componentes que consumen el contexto cuando cambia el estado.

Código con Context API

import Sparkles from "./components/Sparkles";
import Adder from "./components/Adder";
import Remover from "./components/Remover";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Context vs. Redux</h1>
      <section>
        <Sparkles />
      </section>
      <section>
        <Adder />
        <Remover />
      </section>
    </div>
  );

import { useContext } from "react";
import { GeneralContext } from "../context/generalContex";

export default function Sparkles() {
  const { state } = useContext(GeneralContext);
  const counter = state.sparkles;
  const sparklesArray = Array(counter).fill("✨");

  console.log("Render sparkles...");

  return <p className="Sparkles">{sparklesArray.join(" ")}</p>;
}

import { useContext } from "react";
import { REMOVE_SPARKLE } from "../actions/types";
import { GeneralContext } from "../context/generalContex";

export default function Remover() {
  const { dispatch } = useContext(GeneralContext);

  const handleOnclick = () => {
    dispatch({ type: REMOVE_SPARKLE });
  };

  console.log("Render Remover...");

  return (
    <button className="Remover" onClick={handleOnclick}>
      Remover
    </button>
  );
}

import { useContext } from "react";
import { ADD_SPARKLE } from "../actions/types";
import { GeneralContext } from "../context/generalContex";

export default function Adder() {
  const { dispatch } = useContext(GeneralContext);
  const handleOnclick = () => {
    dispatch({ type: ADD_SPARKLE });
  };

  console.log("Render Adder...");

  return (
    <button className="Adder" onClick={handleOnclick}>
      Agregar
    </button>
  );
}

Básicamente, tenemos tres componentes: Sparkles, Adder y Remover. Cada uno incluye un console.log que indica cuándo se renderiza. Podemos observar que, en el primer render, se renderizan los tres componentes.

import React, { createContext, useReducer } from "react";
import generalReducer from "../reducers/generalReducer";

const initialState = {
  sparkles: 1
};

export const GeneralContext = createContext(initialState);

export const GeneralProvider = ({ children }) => {
  const [state, dispatch] = useReducer(generalReducer, initialState);

  return (
    <GeneralContext.Provider value={{ state, dispatch }}>
      {children}
    </GeneralContext.Provider>
  );
};

import { ADD_SPARKLE, REMOVE_SPARKLE } from "../actions/types";

const generalReducer = (state, action) => {
  switch (action.type) {
    case ADD_SPARKLE:
      return {
        ...state,
        sparkles: state.sparkles + 1
      };
    case REMOVE_SPARKLE:
      return {
        ...state,
        sparkles: state.sparkles >= 1 ? state.sparkles - 1 : 0
      };
    default:
      return state;
  }
};

export default generalReducer;

Con Context API, al cambiar el estado mediante los botones de Agregar o Remover, los tres componentes se re-renderizan. En teoría, los botones no sufrieron ningún cambio, por lo que no sería necesario renderizarlos nuevamente.

Código con Redux

import { useSelector } from "react-redux";

export default function Sparkles() {
  const sparkles = useSelector((state) => state.sparkles);
  const sparklesArray = Array(sparkles).fill("✨");

  console.log("Render Sparkles...");

  return <p className="Sparkles">{sparklesArray.join(" ")}</p>;
}

import { useDispatch } from "react-redux";
import { ADD_SPARKLE } from "../actions/types";

export default function Adder() {
  const dispatch = useDispatch();

  const handleOnclick = () => {
    dispatch({
      type: ADD_SPARKLE
    });
  };

  console.log("Render Adder...");

  return (
    <button className="Adder" onClick={handleOnclick}>
      Agregar
    </button>
  );
}

import { useDispatch } from "react-redux";
import { REMOVE_SPARKLE } from "../actions/types";

export default function Remover() {
  const dispatch = useDispatch();

  const handleOnclick = () => {
    dispatch({
      type: REMOVE_SPARKLE
    });
  };

  console.log("Render Remover...");

  return (
    <button className="Remover" onClick={handleOnclick}>
      Remover
    </button>
  );
}

import { ADD_SPARKLE, REMOVE_SPARKLE } from "../actions/types";

const initialState = {
  sparkles: 1
};

const generalReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_SPARKLE:
      return {
        ...state,
        sparkles: state.sparkles + 1
      };
    case REMOVE_SPARKLE:
      return {
        ...state,
        sparkles: state.sparkles >= 1 ? state.sparkles - 1 : 0
      };
    default:
      return state;
  }
};

export default generalReducer;

Teniendo la misma estructura de proyecto, pero utilizando Redux, podemos ver que creamos nuestro store y lo conectamos al Provider.

import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";
import generalReducer from "./reducers/generalReducer";

import App from "./App";

const store = createStore(generalReducer);

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

Podemos observar que, en el primer render, los tres componentes se renderizan. Sin embargo, al cambiar el estado mediante los botones de Agregar o Remover, solo se re-renderiza el componente que realmente cambió, que en este caso es Sparkles.

En proyectos pequeños y sencillos, los problemas de rendimiento no son tan evidentes. Pero en aplicaciones más complejas, con un árbol de componentes más profundo, sí puede afectar la experiencia del usuario. Context API no siempre presenta este problema, ya que existen técnicas para evitar re-renders innecesarios. Sin embargo, Redux ya incluye estas optimizaciones de forma nativa.

Seba Cardoso

Henry J. Perez

Wladimir Rocha

Miguel Angel Reyes Moreno

Gilbert Ardila

Jhon Eduard Bocanegra Ortiz

Darío Condori Humerez

Cesar Augusto Guzman Garrido

Nicolas Cena

Mariangelica Useche

Team Platzi

Juan Camilo Lentino Villalba

Xavier Flores

Juan Pablo Jimenez

Gualberto Montiel

Vinci Guerra

Fernando Alejandro Yerena Ramos

Francisco Salazar

Cayo Legal

Gonzalo Blasco

Juan Diego Mejia Maestre

Alexander Arismendy

Williams Munguía

Andres Prieto

Conceptos claves para empezar

Curso profesional de React JS y Redux

Principios de Redux que todo dev debe saber

Ciclo de vida de datos en Redux