Remove AtomFamily

Author: rtritto

src/components/DataKeyPair.tsx

@@ -1,6 +1,5 @@
 import { Box, styled } from '@mui/material'
 import { useAtomValue, useSetAtom } from 'jotai'
-import { useAtomCallback } from 'jotai/utils'
 import type React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 
@@ -15,7 +14,7 @@ import {
   onChangeAtom,
   quotesOnKeysAtom,
   rootNameAtom,
-  setHoverAtomFamily,
+  setHoverAtom,
   valueAtom
 } from '../state'
 import { useTypeComponents } from '../stores/typeRegistry'
@@ -69,12 +68,7 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
       (value, index) => value === hoverPath.path[index] && nestedIndex ===
         hoverPath.nestedIndex)
   }, [hoverPath, path, nestedIndex])
-  const setHover = useAtomCallback(
-    useCallback((get, set, arg) => {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      useSetAtom(setHoverAtomFamily(arg))
-    }, [])
-  )
+  const setHover = useSetAtom(setHoverAtom)
   const root = useAtomValue(valueAtom)
   const [inspect, setInspect] = useInspect(path, value, nestedIndex)
   const [editing, setEditing] = useState(false)
@@ -206,7 +200,10 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
   return (
     <Box className='data-key-pair'
          data-testid={'data-key-pair' + path.join('.')}
-         onMouseEnter={() => setHover({ path, nestedIndex })}
+         onMouseEnter={
+          useCallback(() => setHover({ path, nestedIndex }),
+            [setHover, path, nestedIndex])
+        }
     >
       <DataBox
         component='span'

src/hooks/useInspect.ts

@@ -1,31 +1,25 @@
 import { useAtomValue, useSetAtom } from 'jotai'
-import { useAtomCallback } from 'jotai/utils'
-import { useCallback, useEffect, useState } from 'react'
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useState
+} from 'react'
 
 import {
   defaultInspectDepthAtom,
-  getInspectCacheAtomFamily,
-  setInspectCacheAtomFamily
+  getInspectCacheAtom,
+  setInspectCacheAtom
 } from '../state'
 import { useIsCycleReference } from './useIsCycleReference'
 
 export function useInspect (path: (string | number)[], value: any, nestedIndex?: number) {
   const depth = path.length
   const isTrap = useIsCycleReference(path, value)
   const defaultInspectDepth = useAtomValue(defaultInspectDepthAtom)
-
-  const getInspectCache = useAtomCallback(
-    useCallback((get, set, arg) => {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      useAtomValue(getInspectCacheAtomFamily(arg))
-    }, [])
-  )
-  const setInspectCache = useAtomCallback(
-    useCallback((get, set, arg) => {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      useSetAtom(setInspectCacheAtomFamily(arg))
-    }, [])
-  )
+  const getInspectCache = useSetAtom(getInspectCacheAtom)
+  const setInspectCache = useSetAtom(setInspectCacheAtom)
   useEffect(() => {
     const inspect = getInspectCache({ path, nestedIndex })
     if (inspect !== undefined) {
@@ -41,8 +35,8 @@ export function useInspect (path: (string | number)[], value: any, nestedIndex?:
       setInspectCache({ path, inspect })
     }
   }, [defaultInspectDepth, depth, isTrap, nestedIndex, path, getInspectCache, setInspectCache])
-  const shouldInspect = useAtomValue(getInspectCacheAtomFamily({ path, nestedIndex }))
-  const [inspect, setOriginal] = useState<boolean>(() => {
+  const [inspect, set] = useState<boolean>(() => {
+    const shouldInspect = getInspectCache({ path, nestedIndex })
     if (shouldInspect !== undefined) {
       return shouldInspect
     }
@@ -53,15 +47,12 @@ export function useInspect (path: (string | number)[], value: any, nestedIndex?:
       ? false
       : depth < defaultInspectDepth
   })
-  const setInspect = useAtomCallback(
-    useCallback((get, set, apply) => {
-      setOriginal((oldState) => {
-        const newState = typeof apply === 'boolean' ? apply : apply(oldState)
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useSetAtom(setInspectCacheAtomFamily(apply))
-        return newState
-      })
-    }, [])
-  )
+  const setInspect = useCallback<Dispatch<SetStateAction<boolean>>>((apply) => {
+    set((oldState) => {
+      const newState = typeof apply === 'boolean' ? apply : apply(oldState)
+      setInspectCache({ path, newState, nestedIndex })
+      return newState
+    })
+  }, [nestedIndex, path, setInspectCache])
   return [inspect, setInspect] as const
 }

src/index.tsx

@@ -1,7 +1,6 @@
 import { createTheme, Paper, ThemeProvider } from '@mui/material'
 import type { Atom } from 'jotai'
 import { useAtom, useSetAtom } from 'jotai'
-import { useAtomCallback } from 'jotai/utils'
 import type React from 'react'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 
@@ -19,9 +18,9 @@ import {
   maxDisplayLengthAtom,
   onChangeAtom,
   onCopyAtom,
-  registryTypesAtomFamily,
+  registryTypesAtom,
   rootNameAtom,
-  setHoverAtomFamily,
+  setHoverAtom,
   valueAtom
 } from './state'
 import {
@@ -75,32 +74,28 @@ const JsonViewerInner: React.FC<JsonViewerProps> = (props) => {
     } else if (typeof props.theme === 'object') {
       setColorspace(props.theme)
     }
-  }, [props.theme])
+  }, [props.theme, setColorspace])
   const onceRef = useRef(true)
   const predefinedTypes = useMemo(() => predefined(), [])
+  const registerTypes = useSetAtom(registryTypesAtom)
   if (onceRef.current) {
     const allTypes = [...predefinedTypes]
     props.valueTypes?.forEach(type => {
       allTypes.push(type)
     })
-    useSetAtom(registryTypesAtomFamily(allTypes))
+    registerTypes(allTypes)
     onceRef.current = false
   }
   useEffect(() => {
     const allTypes = [...predefinedTypes]
     props.valueTypes?.forEach(type => {
       allTypes.push(type)
     })
-    useSetAtom(registryTypesAtomFamily(allTypes))
-  }, [predefinedTypes, props.valueTypes])
+    registerTypes(allTypes)
+  }, [predefinedTypes, props.valueTypes, registerTypes])
 
   const value = useAtom(valueAtom)
-  const setHover = useAtomCallback(
-    useCallback((get, set, arg) => {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      useSetAtom(setHoverAtomFamily(arg))
-    }, [])
-  )
+  const setHover = useSetAtom(setHoverAtom)
   return (
     <Paper
       elevation={0}
@@ -111,7 +106,11 @@ const JsonViewerInner: React.FC<JsonViewerProps> = (props) => {
         userSelect: 'none',
         contentVisibility: 'auto'
       }}
-      onMouseLeave={() => setHover(null)}
+      onMouseLeave={
+        useCallback(() => {
+          setHover(null)
+        }, [setHover])
+      }
     >
       <DataKeyPair
         value={value}

src/state.ts

@@ -1,5 +1,4 @@
 import { atom } from 'jotai'
-import { atomFamily } from 'jotai/utils'
 
 import type { JsonViewerState, TypeRegistryState } from './type'
 
@@ -24,36 +23,44 @@ export const inspectCacheAtom = atom<JsonViewerState['inspectCache'] | undefined
 export const hoverPathAtom = atom<JsonViewerState['hoverPath'] | undefined>(undefined)
 export const registryAtom = atom<TypeRegistryState['registry'] | undefined>(undefined)
 
-export const getInspectCacheAtomFamily = atomFamily(({ path, nestedIndex }) => {
-  const target = nestedIndex === undefined
-    ? path.join('.')
-    : `${path.join('.')}[${nestedIndex}]nt`
-  return atom((get) => get(inspectCacheAtom)[target])
-})
-export const setInspectCacheAtomFamily = atomFamily(({ path, action, nestedIndex }) => atom((get, set) => {
-  const target = nestedIndex === undefined
-    ? path.join('.')
-    : `${path.join('.')}[${nestedIndex}]nt`
-  const inspectCache = get(inspectCacheAtom)
-  return set(inspectCacheAtom, {
-    ...inspectCache,
-    [target]: typeof action === 'function'
-      ? action(inspectCache[target])
-      : action
-  })
-}))
-export const setHoverAtomFamily = atomFamily(({ path, nestedIndex }) => atom(
-  (get, set) => set(hoverPathAtom, path
+export const getInspectCacheAtom = atom(
+  (get) => get(inspectCacheAtom),
+  (get, _set, { path, nestedIndex }) => {
+    const target = nestedIndex === undefined
+      ? path.join('.')
+      : `${path.join('.')}[${nestedIndex}]nt`
+    return get(inspectCacheAtom)[target]
+  }
+)
+export const setInspectCacheAtom = atom(
+  (get) => get(inspectCacheAtom),
+  (get, set, { path, action, nestedIndex }) => {
+    const target = nestedIndex === undefined
+      ? path.join('.')
+      : `${path.join('.')}[${nestedIndex}]nt`
+    const inspectCache = get(inspectCacheAtom)
+    return set(inspectCacheAtom, {
+      ...inspectCache,
+      [target]: typeof action === 'function'
+        ? action(inspectCache[target])
+        : action
+    })
+  }
+)
+export const setHoverAtom = atom(
+  (get) => get(hoverPathAtom),
+  (_get, set, { path, nestedIndex }) => set(hoverPathAtom, path
     ? { path, nestedIndex }
     : null
   )
-))
-export const registryTypesAtomFamily = atomFamily((setState) => atom(
-  (get, set) => {
+)
+
+export const registryTypesAtom = atom(
+  (get) => get(registryAtom),
+  (get, set, setState) => {
     if (typeof setState === 'function') {
-      set(registryAtom, setState)
-      return
+      return setState(get(registryAtom))
     }
-    return setState
+    return set(registryAtom, setState)
   }
-))
+)