Una de las claves para crear aplicaciones React de alto rendimiento es evitar renderizaciones innecesarias. El motor de renderizado de React es eficiente, pero aún así es crucial evitar que se vuelva a renderizar donde no es necesario. En esta publicación, cubriremos errores comunes y cómo evitarlos.

1. Memorizar componentes usando React.memo

La memorización te ayuda a omitir re-renderizaciones cuando los accesorios del componente no han cambiado. Sin embargo, es fácil hacer un mal uso de React.memo al no implementar una función de comparación personalizada.

Uso incorrecto:

const MemoizedComponent = React.memo(MyComponent);

Esto solo verifica si la referencia de los accesorios ha cambiado, lo que puede no siempre ser suficiente.

Uso correcto:

const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
  return prevProps.itemId === nextProps.itemId;
});

Aquí utilizamos una función de comparación personalizada que solo activa una nueva representación cuando cambia la propiedad itemId.

2. Evite el uso excesivo de funciones en línea

El uso de funciones en línea dentro de JSX puede generar rerenderizaciones innecesarias, ya que React trata una nueva función como un nuevo accesorio en cada renderización.

Uso incorrecto:

function ButtonComponent() {
  return  handleClick()}>Click me;
}

Esto hace que handleClick se vuelva a crear en cada renderizado, lo que genera renderizados innecesarios.

Uso correcto:

import { useCallback } from 'react';

function ButtonComponent() {
  const handleClick = useCallback(() => {
    // Handle click logic
  }, []);

  return Click me;
}

Al usar useCallback, memorizamos la función handleClick, evitando recreaciones innecesarias en cada renderizado.

3. Aprovechando PureComponent

Cuando se trabaja con componentes de clase, el uso de React.PureComponent garantiza que el componente solo se vuelva a representar si sus accesorios o su estado cambian. Si estás utilizando React.Component, es posible que se produzcan renderizaciones innecesarias.

Uso incorrecto:

class CardComponent extends React.Component {
  // Component logic
}

Uso correcto:

class CardComponent extends React.PureComponent {
  // Component logic
}

Al extender React.PureComponent, React comparará superficialmente los accesorios y el estado, evitando rerenderizaciones innecesarias.

4. Optimizando el usoSelector en Componentes Funcionales

Al usar useSelector de react-redux, es importante seleccionar solo la porción necesaria del estado.

Uso incorrecto:

import { useSelector } from 'react-redux';

const DataComponent = () => {
  const globalState = useSelector((state) => state);
  // Render logic
};

Esto hará que el componente se vuelva a representar cada vez que cambie cualquier parte del estado.

Uso correcto:

import { useSelector } from 'react-redux';

const DataComponent = () => {
  const selectedData = useSelector((state) => state.specificSlice);
  // Render logic based on specific slice
};

Al seleccionar solo la parte necesaria del estado, minimizas las re-renderizaciones.

5. Implementación de shouldComponentUpdate en componentes de clase

Para los componentes de clase que no extienden PureComponent, la implementación manual de mustComponentUpdate permite un control más granular sobre cuándo se vuelve a renderizar el componente.

Uso incorrecto:

class ListItem extends React.Component {
  // Component logic
}

Esto se volverá a renderizar cada vez que se renderice el componente principal, incluso si los accesorios y el estado no han cambiado.

Uso correcto:

class ListItem extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.itemId !== nextProps.itemId || this.state.value !== nextState.value;
  }

  // Component logic
}

Al personalizar mustComponentUpdate, nos aseguramos de que el componente solo se vuelva a representar cuando cambie la propiedad itemId o el estado del valor.

Conclusión

Al emplear estas técnicas, puede reducir significativamente las re-renderizaciones innecesarias en sus aplicaciones React, lo que lleva a un mejor rendimiento. Implementar la memorización con React.memo, aprovechar PureComponent y ajustar deberíaComponentUpdate son estrategias clave para optimizar sus componentes de React.

Comprender cuándo y cómo optimizar el renderizado puede mejorar enormemente la experiencia del usuario al proporcionar aplicaciones más rápidas y con mayor capacidad de respuesta.

Referencias:

1. Geeks para geeks. (2023). ¿Qué es la memorización en React?
2. Sincronización. (2024). Memorización en React
3. Hygrafo. (2024). ¿Qué es React Memo y cómo usarlo?
4. Refinar.dev. (2024). Guía de notas de React con ejemplos

Si esta guía te resultó útil, ¡considera compartirla con otras personas! ?

Este blog proporciona una descripción general actualizada y completa sobre cómo evitar re-renderizaciones innecesarias en aplicaciones React al mismo tiempo que incorpora las mejores prácticas y cambia los nombres de las variables para mayor claridad y relevancia en las prácticas modernas de desarrollo web.

Citas:
[1] https://www.geeksforgeeks.org/what-is-memoization-in-react/
[2] https://stackoverflow.com/questions/74013864/why-arent-all-react-components-wrapped-with-react-memo-by-default
[3] https://www.syncfusion.com/blogs/post/what-is-memoization-in-react
[4] https://hygraph.com/blog/react-memo
[5] https://refine.dev/blog/react-memo-guide/
[6] https://dmitripavlutin.com/use-react-memo-wisely/
[7] https://www.topcoder.com/thrive/articles/memoization-in-react-js
[8] https://react.dev/reference/react/memo