PROBLEMA

¿Por qué mi componente principal se vuelve a representar si mi hijo usa un gancho que consume un contexto?

CÓDIGO

He leído en GitHub que para evitar que se vuelvan a renderizar componentes que usan ganchos que consumen contextos, es una buena opción hacer lo siguiente:

 function UserPosts({ contents, userData }) { const bottomSheet = usePostBottomSheet(); return ( <MemoizedUserPosts contents={contents} userData={userData} bottomSheet={bottomSheet} /> ); } function areUserPostsPropsEqual() { return true; } const MemoizedUserPosts = memo(({ contents, userData, bottomSheet }) => { console.log("Re-rendering", userData.name, "user posts"); const { locale, t } = useLanguage(); const isMounted = useIsMounted(); ... return ( <CardList data={posts} ... /> ); }, areMemoizedUserPostsPropsEqual); function areMemoizedUserPostsPropsEqual() { return true; }

Como puede ver, en mis MemoizedUserPosts, solo estoy usando dos ganchos, que no vuelven a representar el componente.

Cuando paso los datos a CardList, estoy renderizando Cards. Este componente de tarjeta representa mi componente AuthorRow, lo que provoca que se vuelvan a procesar "MemoizedUserPosts" debido al uso de un gancho que consume mi contexto de usuarios:

 export default function AuthorRow({ userData, onOptionsButtonPress }) { // Get the most updated user data from the users contexts const updatedUserData = useUpdatedUserData(userData); <---- THIS LINE return ( <MemoizedAuthorRow userData={updatedUserData} onOptionsButtonPress={onOptionsButtonPress} /> ); }

Si elimino esa línea, MemoizedUserPosts no se vuelve a representar cuando los datos de usuario cambian en mi contexto.

Aquí está mi gancho useUpdatedUserData:

 export default function useUpdatedUserData(userData) { const currentUser = useCurrentUser(); <--- consume current user context const otherUsers = useOtherUsers(); <--- consume other users context // Get the most updated data from the users context const updatedUserData = (() => { const updatedUserData = userData.id === currentUser.data.id ? currentUser.data : otherUsers.getUser(userData.id); return { ...userData, ...(updatedUserData && updatedUserData), }; })(); return updatedUserData; }

¿Algunas ideas?