Where to save the data received from the server in React for further rendering?

Question

JavaScript

Good afternoon!

I am developing a React application. When working with the server, the question arose, where to save the data received via fetch and how to render it? At the moment, componentDidMount does this : as soon as the component has loaded, we send a request to the server, while the request is being processed, show the spinner, when the data is received, save the result in state , hide the spinner and render the data.
Now when I add a new element, what should the server return in response and how do I re-render the data? Should the server return the last N records, which will have the new element as the last one added? Or return only the added element, but then React should render this element according to the sort, remove the extra element that does not fit, and update the pagination (if required)? With this approach, it seems like too much gesture, it's easier to redirect to the same page so that the component sends a request again and receives data. In general, there are enough options. Tell me how to do it right? Which practice is more common? Sorry if it's confusing. Thanks in advance

Answer 1

Many solutions have been invented for this, but they are all called by one term - the state manager. Examples: redux, mobx, effector, reatom. In "real" applications, react components do not contain logic about query execution and data storage, they do not know anything about the business logic of the system. With the help of various kinds of connectors (each manager has their own), the components connect to the store / stores with data and are only engaged in displaying this data.