Tengo una pequeña aplicación con la siguiente estructura Mensajes -> Mensaje -> Comentarios -> Comentario.
El componente Publicaciones realiza una solicitud de una matriz de publicaciones ordenadas por fecha (DESC). Cada publicación tiene sus comentarios (que llegan a través de otra solicitud).
El problema al que me enfrento. Cuando agrego un nuevo elemento al comienzo de la matriz de publicaciones para mantenerlo ordenado y mostrar el más nuevo, todo el árbol de componentes se actualiza -> Componente de publicación -> Componente de comentarios, por lo tanto, para todas las publicaciones existentes actualmente en la página, habrá nuevamente una solicitud para obtener sus comentarios a pesar de que ya los tienen.
Si lo agrego al final de la matriz, esto no sucede, pero si los clasifico usando un gancho useMemo o algo así, el comportamiento descrito comienza de nuevo
Alguien tiene idea de como puedo superar esto?
Parte del código es así.
{sortedPosts && sortedPosts.map((post, index) => ( <PostWrapper ref={posts.length === index + 1 ? setLoader : null} key={`${post?.id}${index}`} post={post} /> ) )} const PostWrapper = forwardRef(({post}, ref) => ( <Grid ref={ref} container justifyContent="center" item spacing={1} mt={2} xs={8} > <Post post={post} /> </Grid> ))Esto es lo que entendí, e intentaré responder esto según mi entendimiento. Tiene una matriz/lista de publicaciones, y cada publicación tiene una matriz/lista de comentarios. Supongo que está anidado y las publicaciones están incrustadas en la misma matriz de "Publicaciones".
Cuando actualiza la matriz de Publicaciones, React vuelve a renderizar/actualiza la página con los nuevos cambios. Cuando agrega un elemento al principio, todos los elementos se empujan una posición hacia la derecha, lo que activa una actualización para cada publicación. Y, por la misma razón, no lo ve cuando lo agrega al final.
Dos formas de evitar llamadas API adicionales para publicaciones existentes. Elija cuál se adapta mejor a su caso de uso:
// Approach 2 this.setState(state => ({ posts: [...state.posts, newPost] }));