Tengo un componente principal (X) que administra muchos estados y componentes secundarios.
Entre estos niños, tengo un componente animado (Y) (es un avatar que tiene diferentes caras y cambia de cara en sincronía con lo que dice).
Por ahora, el tipo de cara es un estado en X y se da como apoyo a Y. Este mecanismo se realiza configurando una lista de temporizadores que cambiarán el estado en los momentos requeridos. Necesito tener la lógica de los tipos de caras dentro de X porque trato con el habla del avatar dentro de X.
El problema es que, al hablar, el avatar cambia de cara con mucha frecuencia, lo que provoca que todos los niños se reproduzcan con demasiada frecuencia.
Una solución que probé fue envolver a los otros niños en React.memo() para evitar las repeticiones excesivas.
En ese caso, tengo un problema:
Uno de los niños (Z) está envolviendo un botón que hace que el avatar hable, usando como función
onClick()la funciónsayText()proporcionada por X como accesorio. Para Z, usarReact.memo()no es suficiente. De hecho, cuando uso React Profiler, veo que Z todavía se vuelve a renderizar cada vez que el padre vuelve a renderizar porque dice que lasayText()cambia. Para esto, una solución podría ser implementar una verificación de accesorios personalizada paraReact.memo()pero dado quesayText()depende de otros estados (la apariencia del avatar, su voz, etc.), no puedo simplemente memorizarlo una vez.
La alternativa en la que pensé fue: podría evitar tener el tipo de cara como un estado, pero simplemente forzar una nueva representación de una Y de X dándole el nuevo tipo de cara. Pero no sé si es posible y no me parece buena idea de ninguna manera. De todos modos, ¿alguien sabe si es posible?
¿O alguien me puede dar consejos sobre cómo organizar esto mejor para evitar el problema inicial?
Puedo dar más detalles si lo necesita en los comentarios.
Una idea es mover todos los elementos secundarios que no son de voz/avater (y el estado asociado) fuera de X a Z (un nuevo componente principal).
Z representa X y todos los hijos antiguos de X, y X representa solo las cosas relacionadas con el habla/avater.
sayText Envuelva la función anterior en useCallback , luego, si usó React.memo en el componente secundario Z , ya no debería volver a procesarse porque la devolución de llamada devuelta será la misma si sus dependencias no cambian.