Reacts setState() method, reimagined as a hook
npm install --save use-setstateimport { useSetState } from "use-setstate";
const [name, setName] = useSetState("bob", newName => {
console.log(`Hello ${newName}!`);
});- Interface inspired by useState
- State change callback
- State setter can accept updater functions
- Typescript support
- Zero dependencies
The API is similar to Reacts useState() hook:
/*
let [value, setValue] = useState(initialValue?);
*/
let [value, setValue] = useSetState(initialValue?, callback?);The main difference between useState() and useSetState() is the optional callback argument. When a callback is provided, useSetState() will invoke that callback after state updates have been applied via the state setter, this mimicking the behavior of Reacts setState() callback argument:
let [isOpen, setIsOpen] = useSetState(false, () => {
console.log("open state may have changed..");
});When a state change callback is invoked, useSetState() will pass the new state for that hook as the callbacks first argument:
let [, setMoney] = useSetState(0, money => {
if (money < 0) {
console.log("Uh oh..");
}
});The setter function returned by useSetState() supports two methods of updating state. The first method is by direct value updates:
let [mood, setMood] = useSetState("");
setMood("happy");
setMood("sad");State can also be updated by passing an updater function to the state setter, this mimicking the behavior of updaters used with Reacts setState() method:
let [calculation, setCalculatedValue] = useSetState();
// Updater function can update state from a function call
setCalculatedValue(Math.random);
// Updater function can update state from function call that operates on current state
setCalculatedValue(Math.sqrt);
setCalculatedValue(Math.cos);
setCalculatedValue(Math.round);npm run testLicensed under MIT