Β΅hooks
Social Media Photo by Tatiana Rodriguez on Unsplash
π£ Community Announcement
Please ask questions in the dedicated discussions repository, to help the community around this project grow β₯
micro hooks is a simplified ~0.8K alternative to augmentor, with the following differences:
hooked(fn)
is the augmentor entry point equivalent- multiple states update are applied at once asynchronously (these are a Promise.then(...) away)
useEffect
is also applied asynchronously- there are no extra options whatsoever so it's less configurable
- there is no
contextual
export, as every hook can have a context passed along, whenever it's needed, or a good idea at all - exports from
uhooks/async
allowshooked(async () => { ... })
definitions - the uhooks/e export provides an essential utility with
useState
anduseRef
, usable in micro-controllers or whenever synchronous, simplified, hooks are enough, and code size/memory constraints are relevant.
The reason for this module to exist is to explore a slightly different pattern that is not stack-based, but that should perform overall better in real-world use cases, thanks to its smaller size and its reduced amount of invokes applied in bulks.
// <script type="module"> import('//unpkg.com/uhooks?module') for ESM
// <script src="//unpkg.com/uhooks"> for a global uhooks
// const {...} = require('uhooks'); for CommonJS
import {
hooked, wait,
dropEffect, hasEffect,
createContext, useContext,
useCallback, useMemo,
useEffect, useLayoutEffect,
useReducer, useState,
useRef
} from 'uhooks'; // or 'uhooks/async'
const Counter = (start) => {
const [count, setCount] = useState(start);
const {current} = useRef({});
current.increment = () => {
setCount(count + 1);
};
console.log(count);
return current;
};
// logs 1, 1
const comp1 = hooked(Counter)(1);
const comp2 = hooked(Counter)(1);
// logs 2
comp1.increment();
Extras
These hooks are reachable via uhooks/extras
, and can be handy in various occasions:
useUpdatedRef(value)
it's likeuseRef
, except it updates thecurrent
value each time.useMutationObserver(options)
observeoptions.ref
or a new ref accordingly, with theoptions
properties, and it invokes theoptions.mutations(records)
whenever mutations happen.useSWR(key, fetcher, options)
is a simplified version of vercel's useSWR. Theoptions
can haveinitialData
and afetcher
, but other features might land soon.useDebugValue(data, transform)
is a simplified version of its React counterpart. It simply logsdata
through an optionaltransform
callback.