augmentor
Social Media Photo by Lucrezia Carnelos on Unsplash
React like hooks for the masses.
Announcement
If you're looking for a less configurable but smaller solution, as in ~0.8K once minified and gzipped, check Β΅hooks out.
V2 Breaking change
Both useState
and useReducer
are now synchronous by default. If you invoke multiple state changes at once, you can opt into asynchronous execution via the optional argument {async: true}
.
This change was made to keep augmentor defaults similar to what developers coming from other hooks based libraries expect.
Available Hooks
- Basic Hooks
- useState, with optional
{async: true, always: true}
second parameter to use deferred updates, sync by default, and always call the hook, even if the state is the same, false by default. - useEffect
- useContext, which can be defined via
createContext(value)
- useState, with optional
- Additional Hooks
- useReducer, with optional
{async: true, always: true}
third parameter to use deferred updates, sync by default, and always call the hook, even if the state is the same, false by default. - useCallback
- useMemo
- useRef
- useLayoutEffect
- useReducer, with optional
- Third parts exported utilities
hasEffect(augmentedCallback)
returns true ifaugmentedCallback
used some effectdropEffect(augmentedCallback)
executes any cleanup left from lastuseEffect(...)
invocation
example
You can test this example directly on Code Pen.
import {augmentor, useState} from 'augmentor';
// augment any function once
const a = augmentor(test);
a();
// ... or many times ...
const [b, c] = [test, test].map(augmentor);
b();
c();
function test() {
const [count, setCount] = useState(0);
// log current count value
console.log(count);
// will invoke this augmented function each second
setTimeout(() => setCount(count + 1), 1000);
}
F.A.Q.
Can I pass a context to an augmented function?
augmented.call(ctx)
or augmented.apply(ctx, [])
, 'cause no context whatsoever is passed along.
If by any chance you've read, and understood, the related blog post, you'd realize a single augmented function is indeed not good for prototypes or shared methods, as one context could interfere with any other previous context that used that method before.
// WRONG: this is a very bad idea, as any MyComp instance
// could potentially interfere with other instances
MyComp.prototype.doThings = augmentor(doThings);
// GOOD: this is how you'd do it π
class MyComp {
constructor() {
const {doThings} = this;
// augment a bound method/function per each instance
this.doThings = augmentor(doThings.bind(this));
}
doThings() {
// where actually you do hooky-things
}
}
That being said, if you really want to share a context within a single augmented function, meaning that you understand, and know, what you are doing, you can
use the contextual
utility provided by this library.
import {contextual} from 'augmentor';
const textInjector = contextual(function (text) {
this.textContent = text;
});
textInjector.call(div, 'hello');
textInjector.call(p, 'there!');
Please bear in mind that contextualized functions effects will also refer to the previous context, not necessarily the current one, so that you see it's very easy to create troubles sharing, accepting, or passing, multiple contexts to the same augmented stack.
As summary, augmentor(method.bind(context))
is the best way to use a context within an augmented function, but contextual
can help covering other weird edge cases too.