Refactor inspectCache atom

Author: rtritto

src/hooks/useInspect.ts

@@ -1,4 +1,4 @@
-import { useAtomValue, useSetAtom } from 'jotai'
+import { useAtom, useAtomValue } from 'jotai'
 import {
   Dispatch,
   SetStateAction,
@@ -7,11 +7,7 @@ import {
   useState
 } from 'react'
 
-import {
-  defaultInspectDepthAtom,
-  getInspectCacheAtom,
-  setInspectCacheAtom
-} from '../state'
+import { defaultInspectDepthAtom, inspectCacheAtom } from '../state'
 import type { HostPath, JsonViewerProps } from '../type'
 import { useIsCycleReference } from './useIsCycleReference'
 
@@ -23,8 +19,7 @@ export function useInspect (
   const depth = path.length
   const isTrap = useIsCycleReference(path, value)
   const defaultInspectDepth = useAtomValue(defaultInspectDepthAtom)
-  const inspectCache = useAtomValue(getInspectCacheAtom({ path, nestedIndex }))
-  const setInspectCache = useSetAtom(setInspectCacheAtom)
+  const [inspectCache, setInspectCache] = useAtom(inspectCacheAtom({ path, nestedIndex }))
   useEffect(() => {
     if (inspectCache !== undefined) {
       return

src/state.ts

@@ -22,35 +22,33 @@ export const collapseStringsAfterLengthAtom = atom<JsonViewerState['collapseStri
 export const defaultInspectDepthAtom = atom<JsonViewerState['defaultInspectDepth'] | undefined>(undefined)
 export const objectSortKeysAtom = atom<JsonViewerState['objectSortKeys'] | undefined>(undefined)
 export const quotesOnKeysAtom = atom<JsonViewerState['quotesOnKeys'] | undefined>(undefined)
-export const inspectCacheAtom = atom<JsonViewerState['inspectCache']>({})
 export const hoverPathAtom = atom<JsonViewerState['hoverPath'] | null>(null)
 export const registryAtom = atom<TypeRegistryState['registry']>([])
 
+const _inspectCacheAtom = atom<JsonViewerState['inspectCache']>({})
 // TODO check: if memory leaks, add to last line of useEffect:
 // return () => { atomFamily.remove ... // Anything in here is fired on component unmount }
-export const getInspectCacheAtom = atomFamily(({ path, nestedIndex }) => atom(
+export const inspectCacheAtom = atomFamily(({ path, nestedIndex }) => atom(
   (get) => {
     const target = nestedIndex === undefined
       ? path.join('.')
       : `${path.join('.')}[${nestedIndex}]nt`
-    return get(inspectCacheAtom)[target]
-  }
-), deepEqual)
-export const setInspectCacheAtom = atom(
-  (get) => get(inspectCacheAtom),
+    return get(_inspectCacheAtom)[target]
+  },
   (get, set, { path, action, nestedIndex }) => {
     const target = nestedIndex === undefined
       ? path.join('.')
       : `${path.join('.')}[${nestedIndex}]nt`
-    const inspectCache = get(inspectCacheAtom)
-    return set(inspectCacheAtom, {
+    const inspectCache = get(_inspectCacheAtom)
+    return set(_inspectCacheAtom, {
       ...inspectCache,
       [target]: typeof action === 'function'
         ? action(inspectCache[target])
         : action
     })
   }
-)
+), deepEqual)
+
 export const setHoverAtom = atom(
   (get) => get(hoverPathAtom),
   (_get, set, { path, nestedIndex }) => {