Help with optics when dealing with atoms-in-atom

[ampossardt]

Looking for some help trying to understand optics when the subject of the focusing is an atom stored within an atom.

Currently, I have an array of items which are generically typed. They look something like this:

type TreeItem<T> = {
  id: string;
  ...
  data: T;
}

Each item is stored in an atom, scoped to the component in question (in this case, I'm using splitAtom at a higher level to render this list of atoms):

// The atom here is defined outside of each component gets hydrated when the component mounts
const treeItemAtom = atom(
  atom({ ... } as TreeItem<any>)
)

The reasoning behind scoping the data in such a way is to simplify accessing the data across nested components, and also to create derived atoms to represent statuses and such (each component is rather complex).

The data on each tree item has an array property which represents a list of versions which are updated every time a version is added after the initial load. Something like this:

// within a tree item: 
{
   data: {
      versions: {
        id: string;
        value: string;
     }[]
  }
}

Whenever I load the items initially, I create a wrapper atom around the versions to isolate them from changes to the data/item:

const loadDataAtom = (null, (get, set, data) => {
  // example name of an atom that i would be setting
  set(treeItemListAtom, data.map(item => ({  ...item, versions: atom(item.versions) }) ) );
});

My end goal in all of this is to be able to grab the 'most recent' version off the version stack, and also have it react to new items being added to that set of versions. So, ideally I could do something like:

// Assumes that the first item in the array is our latest version
const latestVersionAtom = focusAtom(treeItemAtom, o => o.prop("data").prop("versions").index(0));

// Alternatively, if each version has an 'isLatest' flag:
const latestVersionAtom = focusAtom(treeItemAtom, o => o.prop("data").prop("versions").find(item => item.isLatest));

However, once I have focused to the 'versions' prop, the result is an atom (which can't be focused) rather than an array which can further be focused. I'm probably missing something with how the underlying code works, but if the subject of focus is an atom, and the result is a writable atom which represents a piece of the original, I would have to assume somewhere along the way it can 'unwrap' the atom (for lack of better term) to be able to drill down into its actual properties.

At this point, things have gotten rather complex so I'm thinking about a few things:

1. Is wrapping the set of versions within its own atom over-engineering things? My main goal was to prevent adding history items from affecting the rest of the tree item data, but I'm not familiar enough with the library yet to know if that's a real concern.
2. If this approach isn't overengineered, is there some way to focus within the nested atom that 'versions' stores?

For now, I have a solution which seems to be fine for cases where the 'latest version' is data that I want to use within a component directly:

export function useLatestVersion() {
  // Helper hook which uses selectAtom to grab properties of the 'data' object
  const versionsAtom = useItemData((s) => s.versions);
  const latestVersionAtom = useMemo(() => {
    return focusAtom(versionsAtom, (o) => o.index(0).optional());
  }, []);

  return useAtomValue(latestVersionAtom);
}

However, I can't use this in situations where I want to create a derived atom outside of the flow of a component, since then I'm creating a dependency 'versions' in its entirety, which means that derived atom is subject to all changes to the array. A third question might be, if wrapping versions initially is logical, is it equally as logical to store the 'focused' latest version within the same object? Something like:

const mappedItems = items.map(item => {
  const wrappedVersions = atom(item.versions);
  
  return ({
    versions: wrappedVersions,
    latestVersion: focusAtom(wrappedVersions, o => o.find(x => x.isLatest))
  });
})

Any tips/suggestions on how I should approach this? The longer I describe this, the more I start to think the differences in performance are likely minimal and I'm overengineering this haha. I'd love outside opinions though.