I am making a simple social media app in React Native. In my Feed screen, I am fetching data from my API, storing the array of objects in a posts state, and using a Flatlist to render Post components. I have other screens like PostDetail that I navigate to when a Post is pressed.

The more complex my app gets the harder it gets to manage the posts state that contains all the data required to display posts in the Feed. I find it especially awkward to update that state from other screens like PostDetail; when a user likes the post, comments on the post, etc.

I tried using React's Context API to store posts as a "global" state. That way I had access to the posts state in every screen. But whenever I would update the state it caused the entire app to re-render. Another thing: I find that creating a new posts object is very inefficient when only 1 item needs to be updated. This comes from the notion that state should be immutable in React.

// what if 'posts' is an array of 100+ items? This seems inefficient
const updatedPosts = posts.map(post => (
   post.id === newPost.id ?
   {
      ...post,
      likes: newPost.likes,
      comments: newPost.comments
   } : post
));

setPosts(updatedPosts);

Is there a better way of handling states with lots of data? I've heard that Redux can solve problems like this, but I want to avoid using it unless I really need to.