¡Ah, reacciona! Nuestra querida biblioteca para crear interfaces de usuario. Es la poción mágica que hace que nuestras aplicaciones web parezcan interactivas y rápidas, hasta que un día deja de ser así. De repente, notas que las cosas se ralentizan. Hacer clic en un botón es como enviar una carta mediante una paloma mensajera. Tu aplicación pasa de una velocidad vertiginosa a una pausa para el café lenta y los usuarios empiezan a darte "la apariencia".

¡Pero no te preocupes! Así como el café puede solucionar la mayoría de los problemas de la vida (o eso nos gustaría pensar), algunas técnicas clave pueden acelerar su aplicación React y devolverla a la máxima velocidad. Exploremos 6 formas sencillas de optimizar tu aplicación React, para que sea más rápida que tu dosis diaria de cafeína.

1. División de código: cargar solo lo que necesita

¿Alguna vez entraste a una habitación, encendiste todas las luces y luego te diste cuenta de que solo necesitabas una? Eso es lo que hace tu aplicación React cuando agrupas todo en una gran parte. En cambio, con la división de código, solo cargas las partes de tu aplicación que se necesitan en ese momento. ¡Es como encender las luces habitación por habitación!

Usar React.lazy() y Suspense es una manera perfecta de implementar esto:

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => {
  return (
    Loading...}>
      
  );
}

Por qué ayuda: la división de código reduce el tiempo de carga inicial de tu aplicación al diferir la carga del código no utilizado hasta que sea necesario. Los usuarios no tendrán que esperar a que se cargue toda la aplicación antes de ver algo en la pantalla.

2. Carga diferida de imágenes: no cargue todos los bocadillos a la vez

Imagínese pedir una pizza y recibir en su lugar alimentos equivalentes a un año. Suena ridículo, ¿verdad? Bueno, eso es lo que sucede cuando cargas todas tus imágenes por adelantado. En su lugar, cargue las imágenes de forma diferida, de modo que solo obtenga lo necesario, como pedir una pizza a la vez.

Usar una biblioteca como react-lazyload es una solución rápida:

import LazyLoad from 'react-lazyload';

Por qué ayuda: Al cargar imágenes de forma diferida, se reduce el tiempo de carga inicial de la página y solo se descargan imágenes cuando son necesarias, lo que mejora tanto el rendimiento como la experiencia del usuario.

3. useCallback y useMemo: Aumento de memoria para React

Al igual que sigues reutilizando la misma taza de café para ahorrar tiempo en el lavado, ¡React puede reutilizar valores y funciones si lo permites! useCallback y useMemo son ​​ganchos que te ayudan a almacenar cálculos o funciones costosos, para que no se vuelvan a calcular en cada renderizado.

useEjemplo de nota:

const expensiveCalculation = (num) => {
  return num ** 2;
};

const MyComponent = ({ num }) => {
  const squaredNumber = React.useMemo(() => expensiveCalculation(num), [num]);

  return 
{squaredNumber}
;
}

useEjemplo de devolución de llamada:

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

Por qué ayuda: Con useMemo, React no tendrá que rehacer cálculos costosos innecesariamente. Y useCallback le impide crear una nueva función en cada renderizado. Esto mantiene a React funcionando sin problemas, ¡como actualizar su RAM!

4. Memoización con React.memo: Detener re-renderizaciones innecesarias

¿Tienes ese amigo que repite la misma historia una y otra vez? React también puede ser así: ¡volver a renderizar componentes incluso cuando no es necesario! Aquí es donde entra React.memo, evitando que React vuelva a renderizar componentes a menos que sus accesorios cambien.

const MyComponent = React.memo(({ value }) => {
  return 
{value}
;
});

Por qué ayuda: React.memo es como decirle a React: “¡Oye, ya has escuchado esto antes! No te repitas a menos que haya algo nuevo”. Evita rerenderizaciones innecesarias, ahorrando tiempo y recursos.

5. Gestión eficiente del estado: levántelo solo cuando sea necesario

Elevar el estado es un patrón común en React, pero a veces somos culpables de elevarlo demasiado o administrar demasiado estado en los lugares equivocados. Esto puede causar excesivos renderizados. Mantenga el estado local de los componentes siempre que sea posible y evite rerenderizaciones innecesarias levantando el estado solo cuando sea realmente necesario.

const ParentComponent = () => {
  const [sharedState, setSharedState] = useState(false);

  return (
    
      >
  );
}

const ChildComponent = ({ sharedState }) => {
  return 
{sharedState ? 'Active' : 'Inactive'}
;
}

const AnotherChild = ({ setSharedState }) => {
  return  setSharedState(true)}>Activate;
}

Por qué ayuda: Al administrar el estado con más cuidado y levantarlo solo cuando sea necesario, puedes evitar rerenderizaciones innecesarias de componentes hermanos. Esto mantiene tu aplicación enfocada y eficiente.

6. Antirrebote de la entrada del usuario: ¡Cálmate, reacciona!

Imagínese a alguien escribiendo frenéticamente en una barra de búsqueda y su aplicación intentando procesar cada pulsación de tecla. ¡El pobre React probablemente esté sudando balas! Ingresar antirrebote: el proceso de manejar la entrada solo después de que un usuario hace una pausa, en lugar de cada vez que presiona una tecla.

Usar lodash.debounce puede resolver este problema:

import _ from 'lodash';

const Search = () => {
  const [query, setQuery] = useState('');

  const debouncedSearch = _.debounce((input) => {
    // Do your search logic
    console.log(input);
  }, 500);

  const handleChange = (e) => {
    setQuery(e?.target?.value);
    debouncedSearch(e?.target?.value);
  };

  return ;
}

Por qué ayuda: En lugar de que React tenga un ataque de pánico con cada pulsación de tecla, el rebote le da un respiro. Esto garantiza un mejor rendimiento al manejar la entrada del usuario en tiempo real, como campos de búsqueda o formulario.

Conclusión: Optimizar las aplicaciones de React no es ciencia espacial: ¡es más como asegurarse de no beber seis cafés de una sola vez! Desde la división de código hasta la carga diferida de imágenes, estas técnicas te ayudarán a mantener tu aplicación React rápida y receptiva. Entonces, la próxima vez que tu aplicación comience a sentirse lenta, recuerda: no es culpa de React, ¡solo necesita un poco de optimización!

Recuerde, optimizar una aplicación React es un equilibrio. No es necesario que implementes todas estas técnicas de inmediato. En su lugar, identifique los cuellos de botella de su aplicación, aplique las optimizaciones apropiadas y observe cómo su aplicación se vuelve más rápida de lo que usted puede terminar su café.

Gracias por leer. Si te gustó la publicación, compártela y deja sugerencias.

Conéctate conmigo

Sitio web: Hardik Gohil

Github: https://github.com/HardikGohilHLR

Linkedin: https://www.linkedin.com/in/hardikgohilhlr

Gracias ❤️