import { useCallback , useEffect } from 'react' ; import { useContext , useContextSelector } from 'use-context-selector' ; import { StateContext , DispatchContext , getAtomState } from './Provider' ; import { Atom } from './atom' ; export function useAtomValue < Value > ( atom ) { const dispatch = useContext ( DispatchContext ) ; const atomState = useContextSelector ( StateContext , useCallback ( ( state ) => getAtomState ( state , atom ) , [ atom ] ) ) ; useEffect ( ( ) => { dispatch ( { type : 'COMMIT_ATOM' , atom , atomState } ) ; } ) ; useEffect ( ( ) => { const id = Symbol ( ) ; dispatch ( { type : 'INIT_ATOM' , atom , id } ) ; return ( ) => { dispatch ( { type : 'DISPOSE_ATOM' , atom , id } ) ; } ; } , [ dispatch , atom ] ) ; return atomState . value ; }