react-multi-state
🦍Declarative, simplified way to handle complex local state with hooks.
✨ Features
- 📦 ~286b (gzipped)
- 🔥 Easy to scale
- 🙅♂️ Zero dependencies
- ✂️ Super-flexible API
- ✅ Fully tested and reliable
- 🌈 More declarative than
React.useState
- ⚒ CommonJS, ESM & browser standalone support
🔧 Installation
You can easily install this package with yarn or npm:
$ yarn add react-multi-state
or
$ npm install --save react-multi-state
📖 Usage
The function takes in an object of initial state and returns an array containing
three elements – state
, setState
and setters
:
- state, which contains the current state of the component.
- setState, which is a multi-action dispatcher that takes in a new state object.
- setters, which contains composed
dispatchAction
functions for each state property.
Here is a simple example:
import React useEffect from 'react'import useMultiState from 'react-multi-state' { const state setState setCleanupAfter = return <ul> stateusers </ul> }
↩ Accessing previous state
Currently, there are two ways to access previous state values before update, and they do not require spreading the old state object at all. See the example below.
import Fragment from 'react' { const state setState setCount = return <Fragment> <button =>Update count</button> <button = > Update second count </button> </Fragment> }
React.useState
(examples)
👀 Comparison with With React.useState
, you'd have to call useState
and the individual
dispatcher functions multiple times which is hard to scale and can get messy
real quick as the complexity of your component increases. For example:
import React useState useEffect from 'react' { const users setUsers = const userName setUserName = const gender setGender = const isFetched setIsFetched = }
Meanwhile, with useMultiState
, all you need is a state object, and you can
update as many properties as you want at once like:
import Fragment useRef from 'react' { const firstNameRef = const lastNameRef = const firstName lastName setState setters = console //=> { setState: 𝑓 }, { setFirstName: 𝑓, setLastName: 𝑓 } return <Fragment> <form = > <input ="text" = = /> <input ="text" = = /> <button ="submit">Submit</button> </form> <h2> My full name is firstName lastName </h2> </Fragment> }
💡 More examples
If you prefer dedicated dispatcher functions instead, useMultiState
supports
that too. Each time you add a property to the state object, a new setter based
on the property name is composed and attached to the setters
object. So if you
like to destructure, you can easily create variables for your state and setters
without worrying about defining them in any particular order, contrary to
React.useState
. For instance:
{ const title lesson setTitle setLesson = const updateTitle = console //=> "Unicorns", 𝑓 setLesson() return <h1>title</h1>}
Notice how the second element (setState
) is omitted in the above example.
Better still, you can consume the properties directly from the state and setters object, like so:
{ const state setters = const updateTitle = setters console //=> { title, ... }, { setTitle: 𝑓, ... } return <h1>statetitle</h1>}
Or... destructure some properties and accumulate the rest into state and setters objects:
{ const title lesson ...state setState setTitle setLesson ...setters = console //=> { assignments, ... }, { setAssignments: 𝑓, ... } return <h1>title</h1>}
✨
🤝 License
MIT © Olaolu Olawuyi