React Academy · Lección

Componentes puros y prevención de efectos secundarios en el renderizado

Escriba funciones de renderizado libres de mutaciones y lecturas externas.

Componentes puros y prevención de efectos secundarios en el renderizado es una lección gratuita de React Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Bienvenida

En esta lección aprenderá qué significa que un componente sea puro en React, por qué las funciones de renderizado no deben tener efectos secundarios y cómo detectar y corregir infracciones habituales de la pureza.

¿Qué es una función pura?

Una función pura siempre devuelve el mismo resultado para las mismas entradas y no provoca efectos secundarios observables. React espera que la función de su componente sea pura: con las mismas props y el mismo estado, siempre debería devolver el mismo JSX.

Por qué es importante la pureza en React

React puede llamar varias veces a su componente (StrictMode, funciones concurrentes y renderizado en el servidor). Si el renderizado tiene efectos secundarios, como llamadas a API, mutaciones del DOM o escrituras en variables globales, esos efectos se ejecutarán varias veces de forma impredecible.

Impureza habitual: mutar el estado externo

No mute nunca durante el renderizado las variables definidas fuera del componente. Las mutaciones son correctas dentro de los controladores de eventos o de useEffect, pero no durante el renderizado.

let totalRenders = 0; // external
function Counter() {
  totalRenders++; // BAD: side effect in render
  return <p>{totalRenders}</p>;
}

Impureza habitual: mutar las props

No mute nunca el objeto de props dentro de un componente. Las props son de solo lectura. Si necesita una versión modificada, cree una variable nueva.

// Bad
function Badge({ user }) {
  user.name = user.name.toUpperCase(); // mutates prop!
  return <p>{user.name}</p>;
}

// Good
function Badge({ user }) {
  const displayName = user.name.toUpperCase();
  return <p>{displayName}</p>;
}

Impureza habitual: usar valores aleatorios o fechas durante el renderizado

Llamar directamente a `Math.random()` o `Date.now()` durante el renderizado produce valores distintos en cada llamada, lo que rompe la pureza. Mueva estas operaciones a inicializadores de estado o a useEffect.

// Bad
function Token() {
  const id = Math.random(); // different every render!
  return <p>{id}</p>;
}

// Good
function Token() {
  const [id] = useState(() => Math.random());
  return <p>{id}</p>;
}

Las llamadas a API pertenecen a useEffect

Obtener datos directamente dentro del cuerpo de la función del componente (en lugar de hacerlo en useEffect) es una impureza: se activa en cada renderizado. Mueva siempre las llamadas de obtención de datos a useEffect con las dependencias adecuadas.

// Bad
function Profile({ id }) {
  fetch('/api/user/' + id); // runs on every render!
  return <div />;
}

// Good
useEffect(() => {
  fetch('/api/user/' + id).then(/*...*/);
}, [id]);

Las mutaciones locales son correctas

Crear y mutar objetos o arrays que se han creado *dentro* de la misma llamada de renderizado es totalmente correcto: nadie más puede observarlos. Esto se denomina mutación local.

function List({ items }) {
  const sorted = [...items]; // new array
  sorted.sort();             // mutating a local copy: OK
  return sorted.map(i => <li key={i}>{i}</li>);
}

Usar Strict Mode para encontrar impurezas

React StrictMode llama dos veces a su componente durante el desarrollo. Si la interfaz no es coherente entre ambas llamadas o observa efectos secundarios duplicados, el renderizado no es puro. Corrija la impureza hasta que la doble llamada no cause problemas.

Componentes puros y React.memo

Cuando un componente es puro (mismas props → mismo resultado), envolverlo con `React.memo` indica a React que puede omitir el nuevo renderizado si las props no han cambiado, lo que mejora el rendimiento.

const Pure = React.memo(function Pure({ value }) {
  return <p>{value}</p>;
});

Comprobación rápida

¿Cuál de los siguientes es un efecto secundario aceptable para realizar directamente dentro de la función de renderizado de un componente de React?

Resumen

Los componentes puros siempre devuelven el mismo JSX para las mismas entradas. Evite mutar las props o las variables externas durante el renderizado, use useEffect para los efectos secundarios y confíe en StrictMode para detectar infracciones.

A continuación

Siguiente lección: **Buenas prácticas para claves y refs** — aprenderá a usar correctamente las claves estables, evitar el problema de usar el índice como clave y trabajar con refs de tipo callback.

Preguntas frecuentes

¿La lección «Componentes puros y prevención de efectos secundarios en el renderizado» es gratis?

Sí — el texto completo de «Componentes puros y prevención de efectos secundarios en el renderizado» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Componentes puros y prevención de efectos secundarios en el renderizado»?

Escriba funciones de renderizado libres de mutaciones y lecturas externas. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Componentes puros y prevención de efectos secundarios en el renderizado»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Qué hace StrictMode
Componentes puros y prevención de efectos secundarios en el renderizado
Prácticas recomendadas para keys y refs
Estructura de carpetas y convenciones de nombres

← Volver a React Academy