I have a parent (X) component that manages a lot of states and children components.
Among these children, I have an animated component (Y) (it is an avatar that has different faces and changes faces in sync with what he says).
For now, the type of face is a state in X and is given as a prop to Y. This mechanism is done by setting a list of timers which will change the state at the required times. I need to have the logic of types of faces inside X because I deal with the speech of the avatar inside X.
The problem is that, when speaking, the avatar changes faces very frequently, causing too frequent re-renders of all the children.
One solution that I tried was to wrap the other children in React.memo() to avoid the excessive re-renders.
In that case, I have a problem:
One of the children (Z) is wrapping a button that causes the avatar to speak, using as
onClick()function thesayText()function given from X as a prop. For Z, usingReact.memo()is not sufficient. Indeed, when I use React Profiler, I see that Z still re-renders each time the parent re-renders because it says that thesayText()prop changes. For this, a solution could be to implement a custom props check for theReact.memo()but sincesayText()is dependent on other states (the appearance of the avatar, its voice etc...), I can't just memoize it once.
The alternative I thought about was: I could avoid having the type of face as a state but just force a re-render of a Y from X by giving it the new type of face. But I don't know if it is possible and it does not seem like a good idea any way. Anyway, does somebody know if it is possible ?
Or can somebody give me advices on how to organize this better to avoid the initial problem ?
I can give more details if you need in comments.
One idea is to move all the non-speech/avater children (and associated state) outside of X into Z (a new parent component).
Z renders X and all of X's old children, and X renders just the speech/avater related stuff.
sayText
Wrap the above function in useCallback, then if you used React.memo on child component Z, it should not re-render anymore because the returned callback will be the same if its dependencies don't change.