Comprender cómo React Native representa los componentes es esencial para crear aplicaciones eficientes y de alto rendimiento. Cuando el estado o los accesorios de un componente cambian, React actualiza automáticamente la interfaz de usuario (UI) para reflejar esos cambios. Como resultado, React llama nuevamente al método de renderizado del componente para generar la representación de UI actualizada.

En este artículo, exploraremos tres React Hooks y cómo evitan renderizaciones innecesarias en React

• usarNota
• usarDevolución de llamada
• usarRef

Estas herramientas nos permiten optimizar nuestro código evitando re-renderizaciones innecesarias, mejorando el rendimiento y almacenando valores de manera eficiente.

Al final de este artículo, comprenderemos mejor cómo hacer que nuestras aplicaciones React sean más rápidas y con mayor capacidad de respuesta utilizando estos prácticos ganchos de React.

Usando useMemo de React

En React, useMemo puede evitar re-renderizaciones innecesarias y optimizar el rendimiento.

Exploremos cómo el gancho useMemo puede evitar renderizaciones innecesarias en nuestros componentes de React.

Al memorizar el resultado de una función y rastrear sus dependencias, useMemo garantiza que el proceso se vuelva a calcular solo cuando sea necesario.

Considere el siguiente ejemplo:

import { useMemo, useState } from 'react';

    function Page() {
      const [count, setCount] = useState(0);
      const [items] = useState(generateItems(300));

      const selectedItem = useMemo(() => items.find((item) => item.id === count), [
        count,
        items,
      ]);

      function generateItems(count) {
        const items = [];
        for (let i = 0; i 
          
Count: {count}
          
Selected Item: {selectedItem?.id}
           setCount(count   1)}>Increment
        
      );
    }

    export default Page;

El código anterior es un componente de React llamado Page que usa useMemo para optimizar el cálculo del elemento seleccionado.

Aquí está la explicación:

• El componente mantiene un recuento de variables de estado utilizando el gancho useState.
• El estado de los elementos se inicializa usando el gancho useState con el resultado de la función generateItems.
• El elemento seleccionado se calcula utilizando useMemo, que memoriza el resultado de la operación items.find. Solo vuelve a calcular cuando cambian el recuento o los elementos.
• La función generateItems genera una matriz de elementos según el recuento dado.
• El componente representa el valor de recuento actual, el ID del elemento seleccionado y un botón para incrementar el recuento.

El uso de useMemo optimiza el rendimiento al memorizar el resultado de la operación items.find. Garantiza que el cálculo del elemento seleccionado solo se realice cuando las dependencias (recuento o elementos) cambien, evitando nuevos cálculos innecesarios en renderizaciones posteriores.

La memorización debe emplearse de forma selectiva para operaciones computacionales intensivas, ya que introduce una sobrecarga adicional en el proceso de renderizado.

Usando useCallback de React

El gancho useCallback en React permite memorizar funciones, evitando que se vuelvan a crear durante la renderización de cada componente. Utilizando useCallback. una pieza se crea solo una vez y se reutiliza en renderizados posteriores siempre que sus dependencias permanezcan sin cambios.

Considere el siguiente ejemplo:

import React, { useState, useCallback, memo } from 'react';

    const allColors = ['red', 'green', 'blue', 'yellow', 'orange'];

    const shuffle = (array) => {
      const shuffledArray = [...array];
      for (let i = shuffledArray.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i   1));
        [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
      }
      return shuffledArray;
    };

    const Filter = memo(({ onChange }) => {
      console.log('Filter rendered!');

      return (
         onChange(e.target.value)}
        />
      );
    });

    function Page() {
      const [colors, setColors] = useState(allColors);
      console.log(colors[0])

      const handleFilter = useCallback((text) => {
        const filteredColors = allColors.filter((color) =>
          color.includes(text.toLowerCase())
        );
        setColors(filteredColors);
      }, [colors]);


      return (
        

        

           setColors(shuffle(allColors))}>
            Shuffle
          
          
        
        

          {colors.map((color) => (
            
{color}
          ))}
        
      
      );
    }

    export default Page;

El código anterior demuestra una funcionalidad simple de filtrado y reproducción aleatoria de colores en un componente de React. Repasémoslo paso a paso:

• La matriz inicial de colores se define como allColors.
• La función aleatoria toma una matriz y mezcla sus elementos aleatoriamente. Utiliza el algoritmo de Fisher-Yates para lograr la mezcla.
• El componente Filtro es un componente funcional memorizado que representa un elemento de entrada. Recibe una propiedad onChange y activa la función de devolución de llamada cuando cambia el valor de entrada.
• El componente Página es el componente principal que representa la funcionalidad de filtrado y reproducción aleatoria de colores.
• Los colores de la variable de estado se inicializan usando el gancho useState, con el valor inicial establecido en allColors. Representa la lista filtrada de colores.
• La función handleFilter se crea utilizando el gancho useCallback. Toma un parámetro de texto y filtra la matriz allColors según el texto proporcionado. Luego, los colores filtrados se configuran usando la función setColors del gancho useState. La matriz de dependencia [colores] garantiza que la función handleFilter solo se vuelva a crear si el estado de los colores cambia, optimizando el rendimiento al evitar reproducciones innecesarias.
• Dentro del componente Página hay un botón para mezclar los colores. Cuando el botón hace clic, llama a la función setColors con la matriz aleatoria de allColors.
• El componente Filtro se representa con la propiedad onChange configurada en la función handleFilter.
• Finalmente, la matriz de colores se asigna para representar la lista de elementos de color como
• elementos.

El gancho useCallback se usa para memorizar la función handleFilter, lo que significa que la función solo se crea una vez y se reutiliza en renderizaciones posteriores si las dependencias (en este caso, el estado de los colores) siguen siendo las mismas.

Esta optimización evita reproducciones innecesarias de componentes secundarios que reciben la función handleFilter como accesorio, como el componente Filter.
Garantiza que el componente Filtro no se vuelva a representar si el estado de los colores no ha cambiado, lo que mejora el rendimiento.

Usando useRef de React

Otro enfoque para mejorar el rendimiento en las aplicaciones React y evitar re-renderizaciones innecesarias es usar el gancho useRef. Usando useRef, podemos almacenar un valor mutable que persiste en todos los renderizados, evitando de manera efectiva rerenderizaciones innecesarias.

Esta técnica nos permite mantener una referencia a un valor sin activar actualizaciones de componentes cuando ese valor cambia. Al aprovechar la mutabilidad de la referencia, podemos optimizar el rendimiento en escenarios específicos.

Considere el siguiente ejemplo:

import React, { useRef, useState } from 'react';

function App() {
  const [name, setName] = useState('');
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    

       setName(e.target.value)}
        ref={inputRef}
      />
      Focus
    
  );
}

El ejemplo anterior tiene un campo de entrada simple y un botón. El gancho useRef crea una referencia llamada inputRef. Tan pronto como se hace clic en el botón, se llama a la función handleClick, que se centra en el elemento de entrada accediendo a la propiedad actual del objeto inputRef ref. Como tal, evita la repetición innecesaria del componente cuando cambia el valor de entrada.

Para garantizar un uso óptimo de useRef, resérvelo únicamente para valores mutables que no afecten la representación del componente. Si un valor mutable influye en la representación del componente, debe almacenarse dentro de su estado.

Conclusión

A lo largo de este tutorial, exploramos el concepto de renderizado de React y su impacto potencial en el rendimiento de nuestras aplicaciones. Profundizamos en las técnicas de optimización que pueden ayudar a mitigar las reproducciones innecesarias. React ofrece una variedad de ganchos que nos permiten mejorar el rendimiento de nuestras aplicaciones. Podemos almacenar valores y funciones de manera efectiva entre renderizados aprovechando estos ganchos, lo que aumenta significativamente el rendimiento de la aplicación React.