Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

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!

1 Answer

I know this is old but I'm making a similar todo app. I was also thinking of using the first example you gave. Did you ever try the last example and if so did you have any trouble with it updating a list?

I imagine auto saving when a list reaches a certain size would be the way to go. Or reminding the user to save before exiting.