[Question]: What is the most performant way for dynamically adding atoms or focus atoms for a large tree?

Hi folks,

First of all, great work done with Jotai. Good documentation too.

I have a use-case where i am require to maintain a component tree and its styles, which are to be rendered on a page. Each of this component’s style can be modified. At the moment i use a single useState to update the tree whenever a component style is updated. I feel Jotai can help optimise for performance here as this tree can grow quite large.

Example tree:

const componentTree = {
  id: 'root',
  el: 'div',
  props: {
     style: {
       background: 'grey'
     }
  },
  children: [
    {
      id: '1dfsg2',
      el: 'p',
      props: {
        style: {
          fontSize: '16px'
        }
      },
      children: 'Heading'
     },
     {
      id: '38nsd7',
      el: 'div',
      props: {
        style: {
          marginTop: '10px'
        }
      },
      children: [
        {
          id: '32fss2d',
          el: 'p',
          props: {
            style: {
              fontSize: '12px'
            }
          },
          children: 'Sub text'
         }
      ]
     }
  ]
 }

My question is what is the best way to add state to this given we have dynamic tree. I saw an example here which deals with a similar problem using focusAtoms https://github.com/pmndrs/jotai/blob/master/docs/advanced-recipes/large-objects.md

However, in the above tree the only unique field i have is an id, which is auto generated whenever a component is added to the tree. I can probably use that to dynamically create an atom but issue with that approach is, how do i update the whole component tree itself.

Would appreciate some help/suggestions here on how to best use Jotai for my example.

Cheers 😃

[Aslemammad]

@dai-shi After 443, I’ll get back to this one, but maybe @PuruVJ can figure this out if he’s interested.

[dai-shi]

This has been a great discussion. We’ve fixed some bugs. The current recommendation for tree structure is using splitAtom and focusAtom. However, we noticed some use cases should be handled more nicely. We will continue to explore best practices and collect feedbacks.

Closing this now, and for further discussions, please open a new issue/discussion.