Estoy tratando de emular el comportamiento típico de las redes sociales, donde cuando el usuario elimina una de sus publicaciones, esta se elimina automáticamente en todas las rutas de la aplicación . Solo vea el comportamiento detrás de Instagram o TikTok.
Entonces, he decidido poner todas las publicaciones de los usuarios en un contexto :
export function UserPostsProvider({ children }) { const [posts, dispatch] = useReducer(userPostsReducer, initialState); const addUserPosts = (userId, posts, unshift = false) => { dispatch(actionCreators.addUserPosts(userId, posts, unshift)); }; const deleteUserPost = (userId, postId) => { dispatch(actionCreators.deleteUserPost(userId, postId)); }; const getUserPosts = (userId) => posts[userId] ?? []; return ( <UserPostsContext.Provider value={{ addUserPosts, deleteUserPost, getUserPosts, }} > {children} </UserPostsContext.Provider> ); }Entonces, cuando el usuario ingrese a otro perfil de usuario, las publicaciones se agregarán a este contexto. Además, cuando se desplaza hacia abajo en su propia lista interminable de publicaciones, para eliminar una de sus publicaciones antiguas, todas las publicaciones obtenidas (de la base de datos) también se agregarán al contexto.
Con esto, puedo eliminar las publicaciones que tienen una sincronización entre todas mis rutas. Pero... ¿qué pasa con la memoria RAM y el rendimiento?
He detectado un PRO y un CONTRA con esta solución:
PRO:
Como todas las publicaciones recuperadas se encuentran dentro del contexto, podemos evitar recuperar contenidos que se recuperaron previamente, convirtiendo el Contexto en una especie de caché en memoria.
CONTRAS:
Cuando se desmonta la pantalla de pila de otro perfil de usuario, las publicaciones no se eliminan del contexto... La memoria RAM aumentará linealmente con el paso del tiempo.
¿Cómo puedo solucionar este problema? ¿Algunas ideas?
Porque, si en mis componentes, solo hago:
function UserPosts({ userData }) { const postsContext = useContext(UserPostsContext); const posts = postsContext.getUserPosts(userData.id); const getMorePosts = () => { ... getting posts from DB with pagination } return <CardList data={posts} ... /> }No podré implementar una paginación de datos en absoluto (solo si las publicaciones no están almacenadas en la base de datos), ya que obtengo todas las publicaciones de los usuarios a la vez desde el contexto, y FlatList las procesará todas, causando un gran problema de rendimiento.
Dos sugerencias:
use la paginación en lugar de cargar todas las publicaciones en una sola solicitud. con desplazamiento hacia abajo/desplazamiento hacia arriba, las nuevas solicitudes se enviarán al servidor y obtendrán la cola de los datos. por ejemplo, puede obtener la publicación anterior con una compensación de 10 publicaciones por solicitud o más. Además, con efectivo de CDN y una política de efectivo adecuada, puede administrar una aplicación profesional como Instagram.
puede definir un método (acción) para borrar el valor de contexto en la descarga de la página en la función de limpieza useEffect :
por ejemplo:
useEffect(() => { return () => // here call the cleaner function }, [])Como se discutió en los comentarios a su pregunta.
Mi recomendación sería usar sockets para algo como esto en lugar de almacenar todo en contexto. En su lugar, el contexto solo debe usarse para cosas que son verdaderamente globales y para otras cosas como comentarios/me gusta, en su lugar, debe usar sockets para actualizar los mensajes entrantes/salientes. Por ejemplo, crear un pequeño componente de "comentario" o "mensaje" y dejar que cada uno de ellos se suscriba a su propio socket.
Lo que es más, si está trabajando con algo como "me gusta" o "comentarios", entonces la única forma de actualizarlo en tiempo real es usar sockets o enviar spam a su backend con solicitudes constantes.
Para eso, deberá agregar sockets a su API, por lo que en una ruta como "comentario/9283012/me gusta" o lo que sea, puede publicar un evento "me gusta" (o lo que sea) que los otros usuarios o un usuario específico pueden escuchar a, que a cambio actualizará el componente específico de "comentario" o "mensaje" que creó.