Best way to handle large nested object?

[ryantando]

Hi there, I've been using Jotai since 2023 and loving it.

In my use case, I mostly use derived atoms and some selectAtom for specific cases.
I'm constantly getting and updating data in a nested tree object, focusing on a key.

My question is, is this a good method to handle large objects, or is there a better approach?

My current implementation example (more or less like this)

type App = {
  id: string,
  pages: {
    id: string,
    pathname: string,
    content: {
      id: string,
      components: {
        id: string,
        type: string,
        data: {
          id: string,
          value: string
        }[]
      }[]
    }
  }[]
}

const appAtom = atom<App>("contentIsHere")

const pagesAtom = atom(get => get(appAtom).pages)

const pageSelectedIdAtom = atom("")
const pageSelectedDetailAtom = atom(
  get => get(pagesAtom).find(a => a.id === get(pageSelectedIdAtom)),
  (get, set, id, value) => {

    // Currently either using immer for update
    const currentPagesImmer = get(pagesAtom)
    set(appAtom, produce(currentPagesImmer, draft => {
      const index = draft.findIndex(a => a.id === id)
      if (index !== -1) {
        draft[index] = value
      }
    }))

    // OR using normal update
    const currentPagesNormal = get(pagesAtom)
    const currentPageIndex = currentPagesNormal.findIndex(a => a.id === id)
    if (currentPageIndex !== -1) {
      currentPagesNormal[currentPageIndex] = value
      set(appAtom, {
        ...currentPages,
        pages: currentPagesNormal
      })
    }
  }
)


const componentSelectedIdAtom = atom("")
const componentSelectedDetailAtom = atom(
  get => get(pageSelectedDetailAtom)?.content.components.find(a => a.id === get(componentSelectedIdAtom)),
  (get, set, id, value) => {
    const currentPage = get(pageSelectedDetailAtom)
    set(pageSelectedDetailAtom, produce(currentPage, draft => {
      const component = draft?.content.components.find(a => a.id === id)
      component && Object.assign(component, value)
    }))
  }
)

const componentSelectedDetailDataAtom = atom(
  get => get(componentSelectedDetailAtom)?.data,
  (get, set, id, value) => {
    const currentComponent = get(componentSelectedDetailAtom)
    set(componentSelectedDetailAtom, produce(currentComponent, draft => {
      draft.data = {
        ...draft?.data,
        ...value
      }
    }))
  }
)