Componentes puros en React: cómo funcionan y cuándo usarlos

Los componentes puros en React están centrados en el rendimiento. Ayudan a tu aplicación a evitar re-renderizados innecesarios comprobando si las entradas del componente (props o state) han cambiado realmente. En este artículo, veremos cómo funcionan los componentes puros, cómo usarlos y cuándo son útiles — con ejemplos claros y modernos.

¿Qué es un componente puro?

Un componente puro es un componente que solo se vuelve a renderizar cuando sus props o state han cambiado. React determina si debe volver a renderizarse haciendo una comparación superficial de los props/state actuales con los anteriores.

Usando React.PureComponent

React.PureComponent es el equivalente en componentes de clase a una función pura. Implementa un método shouldComponentUpdate() integrado que realiza una comparación superficial.

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.text}</div>;
  }
}

Si this.props.text no ha cambiado, el componente no se volverá a renderizar.

Alternativa funcional: React.memo

Para componentes funcionales, usa React.memo().

const MyComponent = React.memo(function MyComponent({ text }) {
  return <div>{text}</div>;
});

React omitirá el renderizado si text es el mismo que en el renderizado anterior.

Cómo funciona la comparación superficial

Una comparación superficial significa:

• Los valores primitivos (como números o cadenas) se comparan por valor
• Los objetos y arrays se comparan por referencia

{ a: 1 } === { a: 1 } // false
const obj = { a: 1 }
obj === obj // true

Por lo tanto, si estás pasando un objeto que se muta en lugar de recrearse, es posible que un componente puro no note el cambio.

Ejemplo del mundo real

Sin optimización

const Item = ({ data }) => <div>{data.label}</div>;

Esto se volverá a renderizar cada vez que el padre se renderice, incluso si data no ha cambiado.

Con React.memo

const Item = React.memo(({ data }) => <div>{data.label}</div>);

Ahora el componente solo se vuelve a renderizar cuando data es un nuevo objeto.

Cuándo usar PureComponent o memo

• Estás renderizando listas con muchos elementos
• Las props del componente se mantienen estables entre renderizados
• Quieres reducir los ciclos de renderizado en partes de tu aplicación sensibles al rendimiento
• Estás usando useCallback o useMemo para preservar referencias

Problemas comunes

• La comparación superficial no detecta cambios profundos (objetos/arrays anidados)
• No lo uses a menos que estés seguro de que las props no mutan silenciosamente
• Puede introducir errores si pasas referencias inestables

React.memo vs React.PureComponent

Característica React.PureComponent React.memo Tipo de componente Componente de clase Componente funcional Lógica de comparación Props + state (superficial) Solo props (superficial) Función de comparación personalizada ❌ ✅ React.memo(fn) Uso moderno Menos común Ampliamente utilizado

Conclusión

Los componentes puros pueden ayudar a React a omitir re-renderizados y mantener el rendimiento de tu UI — pero no son una solución mágica. Prefiere React.memo para componentes funcionales, y entiende que la comparación superficial significa que las referencias importan. Úsalo cuando el rendimiento sea importante y las props sean estables.

Preguntas frecuentes