Fix inspectCache atom

Author: rtritto

package.json

@@ -65,6 +65,7 @@
     "@emotion/styled": "^11.10.6",
     "@mui/material": "^5.11.13",
     "copy-to-clipboard": "^3.3.3",
+    "fast-deep-equal": "^3.1.3",
     "jotai": "^1.13.0"
   },
   "lint-staged": {

src/hooks/useInspect.ts

@@ -12,17 +12,21 @@ import {
   getInspectCacheAtom,
   setInspectCacheAtom
 } from '../state'
+import type { HostPath, JsonViewerProps } from '../type'
 import { useIsCycleReference } from './useIsCycleReference'
 
-export function useInspect (path: (string | number)[], value: any, nestedIndex?: number) {
+export function useInspect (
+  path: HostPath['path'],
+  value: JsonViewerProps['value'],
+  nestedIndex?: HostPath['nestedIndex']
+) {
   const depth = path.length
   const isTrap = useIsCycleReference(path, value)
   const defaultInspectDepth = useAtomValue(defaultInspectDepthAtom)
-  const getInspectCache = useSetAtom(getInspectCacheAtom)
+  const inspectCache = useAtomValue(getInspectCacheAtom({ path, nestedIndex }))
   const setInspectCache = useSetAtom(setInspectCacheAtom)
   useEffect(() => {
-    const inspect = getInspectCache({ path, nestedIndex })
-    if (inspect !== undefined) {
+    if (inspectCache !== undefined) {
       return
     }
     if (nestedIndex !== undefined) {
@@ -34,11 +38,10 @@ export function useInspect (path: (string | number)[], value: any, nestedIndex?:
         : depth < defaultInspectDepth
       setInspectCache({ path, inspect })
     }
-  }, [defaultInspectDepth, depth, isTrap, nestedIndex, path, getInspectCache, setInspectCache])
+  }, [defaultInspectDepth, depth, isTrap, nestedIndex, path, inspectCache, setInspectCache])
   const [inspect, set] = useState<boolean>(() => {
-    const shouldInspect = getInspectCache({ path, nestedIndex })
-    if (shouldInspect !== undefined) {
-      return shouldInspect
+    if (inspectCache !== undefined) {
+      return inspectCache
     }
     if (nestedIndex !== undefined) {
       return false

src/state.ts

@@ -1,4 +1,6 @@
+import deepEqual from 'fast-deep-equal'
 import { atom } from 'jotai'
+import { atomFamily } from 'jotai/utils'
 
 import { lightColorspace } from './theme/base16'
 import type { JsonViewerState, TypeRegistryState } from './type'
@@ -21,19 +23,20 @@ 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'] | undefined>({})
+export const inspectCacheAtom = atom<JsonViewerState['inspectCache']>({})
 export const hoverPathAtom = atom<JsonViewerState['hoverPath'] | null>(null)
 export const registryAtom = atom<TypeRegistryState['registry']>([])
 
-export const getInspectCacheAtom = atom(
-  (get) => get(inspectCacheAtom),
-  (get, _set, { path, nestedIndex }) => {
+// 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(
+  (get) => {
     const target = nestedIndex === undefined
       ? path.join('.')
       : `${path.join('.')}[${nestedIndex}]nt`
     return get(inspectCacheAtom)[target]
   }
-)
+), deepEqual)
 export const setInspectCacheAtom = atom(
   (get) => get(inspectCacheAtom),
   (get, set, { path, action, nestedIndex }) => {
@@ -51,10 +54,9 @@ export const setInspectCacheAtom = atom(
 )
 export const setHoverAtom = atom(
   (get) => get(hoverPathAtom),
-  (_get, set, { path, nestedIndex }) => set(hoverPathAtom, path
-    ? { path, nestedIndex }
-    : null
-  )
+  (_get, set, { path, nestedIndex }) => {
+    set(hoverPathAtom, path ? { path, nestedIndex } : null)
+  }
 )
 
 export const registryTypesAtom = atom(

src/type.ts

@@ -173,9 +173,14 @@ export type JsonViewerProps<T = unknown> = {
   displayObjectSize?: boolean
 }
 
+export type HostPath = {
+  path: Path
+  nestedIndex?: number
+}
+
 export type JsonViewerState<T = unknown> = {
   inspectCache: Record<string, boolean>
-  hoverPath: { path: Path; nestedIndex?: number } | null
+  hoverPath: HostPath | null
   indentWidth: number
   groupArraysAfterLength: number
   enableClipboard: boolean

yarn.lock

@@ -2002,6 +2002,7 @@ __metadata:
     eslint-plugin-simple-import-sort: ^10.0.0
     eslint-plugin-unused-imports: ^2.0.0
     expect-type: ^0.15.0
+    fast-deep-equal: ^3.1.3
     husky: ^8.0.3
     jotai: ^1.13.0
     jsdom: ^21.1.1