React state with dynamic content

Question

I'm working on CMS build on React. A couple of times I ran into the issues that I was working on a page where the user can add and remove content. This content itself has properties that can also be changed. I'm really confused about where I should keep the state of all these properties.

So for example: I have a blog-like page where the user can add and remove short news updates. Every news update has a title, content and some other properties like category.

The way I see it all of the state could be owned by the BlogEditor component (which holds all of the posts), or the BlogEditor only knows the id's of the posts and the posts themselves own the state of their content (and communicate with the API). What is the best practice in React?

Answer 1

This one will come down to personal preference, so no "best practice" per se. It's hard to make a call with so little context, but I've always found that unnecessarily passing data down from parent to child is annoying, and that it's generally best to go with the "BlogEditor only knows the id's of the posts and the posts themselves own the state of their content (and communicate with the API)".

But, if this means that you're going to make eg. 10 API requests from each of 10 child components rather than 1 API request from the parent component, then you might want to opt for the 1 API request instead.

So, the answer is "make the call based on the situation, there's no clear answer".