Cuando creamos aplicaciones en React, a menudo nos encontramos con los términos renderizar y volver a renderizar componentes. Aunque esto puede parecer simple a primera vista, las cosas se vuelven interesantes cuando están involucrados diferentes sistemas de administración de estado como useState, Redux o cuando insertamos ganchos de ciclo de vida como useEffect. Si desea que su aplicación sea rápida y eficiente, comprender estos procesos es clave.

¿Qué es el renderizado?

La renderización es el proceso mediante el cual React representa su interfaz de usuario (UI) en la pantalla, según el estado o los accesorios. Cuando su componente se renderiza por primera vez, se denomina primer renderizado.

¿Cómo funciona el renderizado inicial?

Cuando un componente se "monta" por primera vez en el DOM, esto es lo que sucede:

1. Inicialización de estado:
Ya sea que use useState, props o Redux, se crea el estado inicial del componente.

2. Función de renderizado:
React recorre el código JSX y genera un DOM virtual basado en el estado actual.

3. Crea un DOM virtual (DOM virtual) para el estado actual del componente.

4. Comparando (diferenciando):
El DOM virtual se compara con el DOM real (dado que es el primer renderizado, todos los elementos se renderizarán por completo).

5. Demostración:
El componente se muestra en la pantalla.
Una vez que se renderiza el componente, el siguiente desafío es volver a renderizarlo.

Re-renderizado: ¿cuándo y por qué?

La renderización ocurre cada vez que cambian el estado o los accesorios. ¿Hiciste clic en el botón que cambia el número en la pantalla? ¿Cambió un valor en la tienda Redux? Todas esas acciones pueden hacer que React renderice el componente nuevamente, y ahí es donde entra en juego el renderizado.

¿Cómo funciona la renderización?

Detección de cambio de estado:

• Con useState, cuando llamas a setState, React sabe que necesita actualizar el componente.

• Con Redux, cuando un valor en la tienda cambia, cada componente asociado con esa parte del estado se vuelve a representar.

Activador de renderizado:

Cuando el estado cambia, React crea un nuevo DOM virtual basado en ese cambio.

Comparando (diferenciando):

• React compara el nuevo DOM virtual con el anterior y calcula qué cambios aplicar. Esta es una forma en que React optimiza el renderizado.

Ver cambios:

• Después de calcular los cambios, React los aplica al DOM real. Por lo tanto, solo se vuelven a mostrar las partes modificadas de la página.

¿Qué componentes se vuelven a renderizar?

No todos los componentes se ven afectados por cada cambio. React renderiza solo aquellos componentes que:

Usar estados locales:
Si usa useState, el componente se vuelve a representar cada vez que se llama a setState.

Usar estado Redux:
Si su componente depende del estado de Redux (a través de useSelector o connect), se volverá a representar cuando esa parte del estado cambie.

Usar accesorios:
Si el valor de los accesorios cambia, el componente se vuelve a representar con los nuevos valores.

Optimización del renderizado

Por supuesto, no siempre es ideal volver a renderizar todos los componentes innecesariamente. Si queremos que la aplicación funcione de forma rápida y eficaz, aquí tienes algunas técnicas de optimización:

1. Componentes de memorización
React ofrece funcionalidad para la memorización de componentes a través de React.memo. Si su componente no depende de accesorios o cambios de estado, puede "recordarlo", por lo que se volverá a representar solo cuando cambien los valores relevantes.

Ejemplo:

const MemoizedComponent = React.memo(MyComponent);

2. Memorización de funciones y valores

Para evitar recrear funciones o valores en cada renderizado, use useCallback para memorizar funciones y useMemo para memorizar valores.

• useCallback te permite memorizar una función y evitar que se vuelva a crear hasta que cambien las dependencias.

• useMemo memoriza el resultado de la función, por lo que no se vuelve a calcular en cada renderizado.

Ejemplo:

const increment = useCallback(() => {
  setCount(prevCount => prevCount   1);
}, []);

const expensiveCalculation = useMemo(() => {
  return count * 2;
}, [count]);

3. Optimización de Redux

Si usa Redux, puede optimizar aún más la aplicación con selectores memorizados como reselect. Esto permite evitar volver a renderizar componentes que no se ven afectados por el cambio de estado.

Ganchos de ciclo de vida y renderizado

En las clases clásicas de React, usamos mustComponentUpdate para controlar cuándo se volverá a renderizar el componente. En componentes funcionales, este concepto se puede simular usando useEffect y memorización.

Conclusión

El renderizado y el rerenderizado son cruciales para la visualización de la interfaz de usuario en las aplicaciones React, pero comprender y optimizar adecuadamente esos procesos puede marcar la diferencia entre una aplicación lenta y una súper rápida. El uso correcto de memorización, useCallback, useMemo, así como el manejo cuidadoso de Redux, ayuda a evitar rerenderizaciones innecesarias y a mantener nuestras aplicaciones rápidas y responsivas.

Código de ejemplo: renderizado y renderizado en acción
A continuación se muestra un ejemplo de un componente que utiliza useState, Redux y memorización para optimizar la representación:

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  // Lokalni state
  const [count, setCount] = useState(0);

  // Redux state
  const reduxValue = useSelector(state => state.someValue);
  const dispatch = useDispatch();

  // Memoizacija funkcije kako bi se izbeglo ponovno kreiranje na svakom renderu
  const increment = useCallback(() => {
    setCount(prevCount => prevCount   1);
  }, []);

  // Memoizacija izračunate vrednosti
  const expensiveCalculation = useMemo(() => {
    return count * 2;
  }, [count]);

  // Efekat koji se pokreće samo pri promeni reduxValue
  useEffect(() => {
    console.log("Redux value changed:", reduxValue);
  }, [reduxValue]);

  return (
    

      
Count: {count}
      
Expensive Calculation: {expensiveCalculation}
      Increment
       dispatch({ type: 'SOME_ACTION' })}>
        Dispatch Redux Action
      
    
  );
};

Como podemos ver, aquí se utiliza una combinación de estado local, Redux, memorización y gancho useEffect para hacer que la aplicación sea lo más eficiente posible.