Improve examples/tutorial to demonstrate list items using individual atoms

The video demonstrates a list where each item is represented by its own atom. However, the tutorial does not do this, and thus it does not carry the same performance benefits that are explained in the video.

Perhaps we could update the examples/tutorial so it matches the content outlined in the video?

Whilst I’m here, how would you represent each todo item as its own atom? IIUC, the parent list component would add new todo items by adding a new ID to the list:

  const addItem = () => {
    setTodoIdList((oldTodoIdList) => [
      ...oldTodoIdList,
      getId(),
    ]);
    setInputValue('');
  };

… but the part I got stuck on was defining the initial text value for the new todo list item.

[adrianbw]

Can I bump this? If I have an array of data that I want to make atomFamilies out of, what would the method be for that?

[ghost]

@adrianbw I am finally now able to take a look at this. That seems okay, your solution, but I can have an answer for you sometime this week. For this, if I am understanding you correctly, you want to produce atoms and you might need to make this a util class that is then exported. Then consume that class util to ultimately get the end result you would like to obtain. Again my answer might change as I will be testing this and I am sorry about the late response. Again disclaimer, very new to Recoil.