0
154
Vistas¿Cómo puedo reducir los renderizados innecesarios en reaccionar sin usar el gancho useMemo?
No estoy seguro de si debo cambiar mi enfoque sobre cómo represento los componentes. Dependo de muchos modales que provocan renderizaciones innecesarias al mostrar/ocultar los modales.
Esta es una idea básica de cómo se procesan actualmente mis componentes: 
Tengo casos en los que puedo reutilizar los componentes (como el Componente X en el Componente C y D), sin embargo, hay casos (Componente A3/B3 y Componente E3) en los que la estructura es completamente diferente, lo que dificulta la reutilización del componente. El problema que encuentro es una interfaz de usuario lenta debido a múltiples renderizaciones.
Muestro los modales en función de las variables de estado declaradas en su componente principal correspondiente. Al cambiar la variable de estado del padre para mostrar el modal, el padre se vuelve a renderizar y, por lo tanto, todos sus hijos también. Entonces, como ejemplo, si quiero mostrar el modal Crear/Editar en el Componente A1, esto hará que el Componente A, A2 y A3 también se vuelvan a procesar, lo cual es bastante innecesario. Utilicé los ganchos useMemo y useCallback ( https://reactjs.org/docs/hooks-reference.html#usememo ) para ayudar a reducir la carga, pero no estoy seguro de si este es el enfoque correcto. Parece que dependo demasiado de los ganchos useMemo y useCallback solo para mostrar un modal.
La idea detrás de los modales es eliminar/editar/crear un registro que se mostrará en la tabla (ubicado en un componente diferente). Esto es por diseño y no puedo cambiar esto.
Para manipular los datos, paso una función de devolución de llamada a cada componente modal. El componente modal envía los datos que se cambian en el modal a la función de devolución de llamada donde los datos se pueden manipular en el componente principal.
1 Respuestas
Responde la pregunta0
Este es un caso para React.memo . Es como el gancho useMemo , pero para los componentes, y evita que se vuelvan a renderizar los componentes a menos que cambien sus accesorios:
const MyComponent = React.memo(function MyComponent(props) { /* render using props */ });Si su componente genera el mismo resultado con los mismos accesorios, puede incluirlo en una llamada a
React.memopara mejorar el rendimiento en algunos casos memorizando el resultado. Esto significa que React omitirá renderizar el componente y reutilizará el último resultado renderizado.
Si esto no resuelve el problema porque sus modales y componentes comparten los mismos accesorios, entonces probablemente sea hora de reconsiderar la estructura de su estado para que pueda separarlo de acuerdo con las preocupaciones de su aplicación.
Los enfoques alternativos para el uso independiente del estado "global" incluyen la API de contexto y varias bibliotecas de estado atómico como recoil y effector .