A collection of useful hooks for data structures and logic, designed for efficiency
npm install react-exo-hooksts
function Component () {
const [isUnsaved, setIsUnsaved] = useState(false) useUnsaved(isUnsaved)
}
`useDebouncedState
Debounce state changes with a delay
tsx
function Component () {
const [debounced, setState, real] = useDebouncedState('', 300) useEffect(() => {
console.log(
Debounced value: ${debounced})
}, [debounced]) return (
setState(e.currentTarget.value)} />
)
}
`usePromise
Handle a promise within render behavior
ts
function Component () {
const {
// 'waiting' | 'resolved' | 'rejected'
state,
result,
error
} = usePromise(() => signedIn && ((abortSignal) -> getUserProfile(abortSignal)))
}
`useSet
A Set. Rerenders upon mutation. Listen for update signal with
> [!TIP]
> Force state update with
tsx
function Component () {
const set = useSet() useEffect(() => {
console.log('set items:')
for (const item of set) console.log(item)
}, [set, +set])
return (
)
}
`useMap
A Map. Rerenders upon mutation. Listen for update signal with
> [!TIP]
> Force state update with
tsx
function Component () {
const map = useMap() useEffect(() => {
console.log('map items:')
for (const [key, value] of map.entries()) console.log(
[${key}]: ${value})
}, [map, +map]) return (
)
}
`useArray
An Array. Rerenders upon mutation. Listen for update signal with
> [!TIP]
> Force state update with
tsx
function Component () {
const array = useArray() useEffect(() => {
console.log('array items:', array.join(', '))
}, [array, +array])
return (
)
}
`useObject
An Object. Rerenders on mutation. Will recursively listen on simple children (not class instances).
> [!TIP]
> Force state update with , the third item of the tuple
`tsx
function Component () {
const [object, setObject] = useObject({ foo: { bar: 'baz' } }) useEffect(() => {
console.log('Object updated!', object)
}, [object, +object])
return (
)
}
``