JavaScript

Dominik Kaczmarczyk
Dominik Kaczmarczyk
14,119 Points

What would be the best aproach to updating a list in React after adding of a new element?

Hey let's say I'm making a todo list app with React, which lets user log in, create his own todo list and perform CRUD operations on it.

I see two approaches there:

  1. When entering a page with todo list component, list items are fetched from the database (through backend .API for example) and saved in component state. Then, after performing some kind of operation - for example adding of a new item to the list - POST request containing new item is made to the API and if succeeded, next item is simply added to component state, without any new GET to the API - changes are stored just in react state, until we refresh the page - after each site refresh new GET request is made to the API, and whole, updated list is retrieved and saved in the state too.

  2. When entering a page with todo list component, list items are fetched from the database and displayed (maybe even without saving them to the component state?). Then, after performing some kind of operation - for example adding of an item to the list - POST request containing new item is made to the API and if succeeded , new GET request for the whole todo list data is made, and whole todo list gets refreshed.

Which approach would be better? I'm currently using the first one, because setState is generally working faster than new GET to the API. And I feel like it's a lot easier to maneuvre the data saved in the state.

But my fear is that if that todo-list would get really big, and whole data would be saved in react state, app would start running slow. On the other hand, getting whole list after each update would be slower too in that case.

Im not storing any sensitive (user password or sth) data in the state. Im storing just session Id in a cookie (what isn't probably the best solution right now too, but im still learning).

So again, which approach is better? Or maybe there is some kind of better, industry- standard way of doing this kind of things?

I would be glad for any help. Thanks!