Helpers
startFacetTransition
A function API that works analogously to React's startTransition
, ensuring that any React state changes resulting from facet updates are handled within a React transition.
For detailed documentation and examples, see startFacetTransition
in the Hooks documentation.
Quick example:
tsx
import {startFacetTransition ,useFacetState } from '@react-facet/core'constDataLoader = () => {const [dataFacet ,setData ] =useFacetState <string[]>([])constloadData = () => {// Mark heavy update as low-priority transitionstartFacetTransition (() => {constnewData =Array .from ({length : 10000 }, (_ ,i ) => `Item ${i }`)setData (newData )})}return <button onClick ={loadData }>Load Data</button >}
multiObserve
multiObserve
allows to observe an array of Facet
s for changes. For example:
ts
import {createFacet ,multiObserve } from '@react-facet/core'constuserNameFacet =createFacet ({initialValue : 'Jane' })constuserLevelFacet =createFacet ({initialValue : 'maintainer' })constunObserve =multiObserve ((userName ,userLevel ) => {console .log (`${userName } is now ${userLevel }`)},[userNameFacet ,userLevelFacet ],)// Logs "Jane is now maintainer"userLevelFacet .set ('admin')// Logs "Jane is now admin"unObserve ()userNameFacet .set ('Janice')// Does not log anything
hasDefinedValue
This helpers allows to check for whether a value extracted from a Facet is null
, undefined
or NO_VALUE
. This is useful because the classic check != null
is not enough, since a Facet value can also be the special NO_VALUE
Symbol.
ts
import {hasDefinedValue ,NO_VALUE } from '@react-facet/core'hasDefinedValue (null) // falsehasDefinedValue (undefined ) // falsehasDefinedValue (NO_VALUE ) // falsehasDefinedValue (0) // true
areAllDefinedValues
This helpers allows to check for whether a list of values extracted from a list of Facets are null
, undefined
or NO_VALUE
. This is useful because the classic check != null
is not enough, since a Facet value can also be the special NO_VALUE
Symbol.
ts
import {areAllDefinedValues ,NO_VALUE } from '@react-facet/core'areAllDefinedValues ([null,undefined ,NO_VALUE , 'someValue', 0, true, {a : 'b' }, ['a', 'b', 0]]) // falseareAllDefinedValues ([null, true, 'someValue', 0, false, {a : 'b' }, ['a', 'b', 0]]) // falseareAllDefinedValues ([undefined , true, 'someValue', 0, false, {a : 'b' }, ['a', 'b', 0]]) // falseareAllDefinedValues ([NO_VALUE , true, 'someValue', 0, false, {a : 'b' }, ['a', 'b', 0]]) // falseareAllDefinedValues ([true, false, '', 'someValue', 0, 1, {a : 'b' }, ['a', 'b']]) // true