README.md

useSetState

Reacts setState() method, reimagined as a hook

---

Quick Start

npm install --save use-setstate

import { useSetState } from "use-setstate";

const [name, setName] = useSetState("bob", newName => {
  console.log(`Hello ${newName}!`);
});

Features

• Interface inspired by useState
• State change callback
• State setter can accept updater functions
• Typescript support
• Zero dependencies

Usage

The API is similar to Reacts useState() hook:

/*
let [value, setValue] = useState(initialValue?);
*/
let [value, setValue] = useSetState(initialValue?, callback?);

State change 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..");
  }
});

Setter function

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);

Run tests

npm run test

License

Licensed under MIT