How to interact with api in React todo app?

Question

RESTful API

There is crud rest api on nestjs. Routes for requesting individual tasks, all at once, updating and deleting by id and creating. How to properly build interaction with this api in a react application? That is, when mounting a component, I pull out an array of task objects and generate a component based on them. But when tasks change (for example, the isChecked property changes), what should I do? Modify at the same time the tasks stored in the state and send a put request? Or send a put request, and then re-pull out the entire array and write it to the state (I think this is incorrect in terms of performance)? Or perform all operations with tasks in the state, and then, when the component is unmounted, just write them all at once via api to the database? Thanks a lot)

Answer 1

So that there is no out of sync between the client and the server (in case of an error on the server, for example), you need to update the state only after successfully saving it on the server. You need to pull out the tasks again from the server if several people add, change or delete them at the same time (for a full real-time update, then it is better to use sockets).