Accessing an element of an array

[dayunbao]

HI,

I'm not sure how to do this, and I think the way I'm trying to do it is causing infinite recursion. Let's say I have some data that looks like this:

export const initComicBook: ComicBook = {
    ...
    pages: [
        {
            ...
            panels: [
                {...}
            ],
        }
    ],
}

I have tried creating the atoms and focusAtoms this way:

export const comicBookAtom = atom(initComicBook);
export const pagesAtom = focusAtom(comicBookAtom, (optic) => optic.prop("pages"))
export const pagesAtomsAtom = splitAtom(pagesAtom)

and then I want to do something like this:

const [atomPages] = useAtom(pagesAtomsAtom);
let [currentPage] = useAtom<ComicBookPage>(atomPages[pageIndex]);
let [currentPageAtom, setcurrentPageAtom] = useState(atomPages[pageIndex]);
let panelsAtom = focusAtom(currentPageAtom, (optic) => optic.prop("panels"));
let panelsAtomsAtom = splitAtom(panelsAtom);
let [panels, setPanels] = useAtom(panelsAtomsAtom);

where the current page can change, and that change is tracked with the pageIndex.

This isn't working. I'm getting several type errors, and my page is stuck in an infinite loop. I think it's because of theatomPages[pageIndex] because atomPages[pageIndex] might be creating a new atom in the render, but I'm not sure. I'm somewhat new to his library and managing state in React in general. Any suggestions?

[rothsandro]

let panelsAtom = focusAtom(currentPageAtom, (optic) => optic.prop("panels"));

This creates a new atom on every render which results in the infinite loop. Either make the 2nd argument stable (by moving the function out of the component) focusAtom(currentPageAtom, getPanels) or memoize the atom useMemo(() => focusAtom(...), [currentPageAtom]).