diff --git a/packages/@react-facet/core/src/hooks/useFacetWrapMemo.spec.tsx b/packages/@react-facet/core/src/hooks/useFacetWrapMemo.spec.tsx index b780e9f..8325bda 100644 --- a/packages/@react-facet/core/src/hooks/useFacetWrapMemo.spec.tsx +++ b/packages/@react-facet/core/src/hooks/useFacetWrapMemo.spec.tsx @@ -4,7 +4,7 @@ import { useFacetWrapMemo } from './useFacetWrapMemo' import { useFacetEffect } from './useFacetEffect' import { useFacetMap } from './useFacetMap' import { createFacet } from '../facet' -import { FacetProp, Value } from '..' +import { FacetProp, NO_VALUE, Value } from '../types' it('wraps a value, updating the facet when it changes', () => { const mock = jest.fn() @@ -78,6 +78,32 @@ it('forwards a facet', () => { expect(mock).toHaveBeenCalledWith('changed') }) +it('forwards a facet with NO_VAUE', () => { + const demoFacet = createFacet({ initialValue: NO_VALUE }) + const mock = jest.fn() + + const ComponentWithFacetEffect: React.FC = () => { + const facetifiedValue = useFacetWrapMemo(demoFacet) + useFacetEffect( + (value) => { + mock(value) + }, + [], + [facetifiedValue], + ) + return + } + + // On first render, it should not call the effect, as the wrapped facet has no value + render() + expect(mock).not.toHaveBeenCalled() + + mock.mockClear() + demoFacet.set('changed') + expect(mock).toHaveBeenCalledTimes(1) + expect(mock).toHaveBeenCalledWith('changed') +}) + it('updates correctly if the facet instance change (ex: via a useFacetMap)', () => { const demoFacet = createFacet({ initialValue: 'value' }) diff --git a/packages/@react-facet/core/src/hooks/useFacetWrapMemo.ts b/packages/@react-facet/core/src/hooks/useFacetWrapMemo.ts index 5a6e75d..544efcd 100644 --- a/packages/@react-facet/core/src/hooks/useFacetWrapMemo.ts +++ b/packages/@react-facet/core/src/hooks/useFacetWrapMemo.ts @@ -18,7 +18,7 @@ export function useFacetWrapMemo( * facet value via the setter below. */ const inlineFacet = useMemo( - () => createFacet({ initialValue: prop as T, equalityCheck }), + () => createFacet({ initialValue: isFacet(prop) ? prop.get() : prop, equalityCheck }), // eslint-disable-next-line react-hooks/exhaustive-deps [], )