React hook for managing effectful reducers.

Downloads in past


1.1.14 months ago4 months agoMinified + gzip package size for react-use-bireducer in KB


🔀 React use bireducer tests codecov npm
React hook for managing effectful reducers.


When your application gets bigger, it is hard to manage both state changes and effectful computations. I find the Model-View-Update pattern (which the Elm architecture is based on) really effective for this kind of task. useBireducer implements this pattern by combining two reducers (hence the name): a state reducer and an effect reducer.
The state reducer is really close to useReducer, except that it returns the new state AND the effects to execute:
type StateReducer<S, A, E> = (state: S, action: A) => [S, Array<E>];

The effect reducer just executes effects and can return a cleanup function. This cleanup function is called when the component unmounts:
type EffectReducer<E, A> = (effect: E, dispatch: React.Dispatch<A>) => void | (() => void);

This pattern helps you to separate state changes from effectful computations. It also makes your tests stronger.


yarn add react-use-bireducer
# or
npm install react-use-bireducer


import {useBireducer} from "react-use-bireducer";

const [state, dispatch] = useBireducer(stateReducer, effectReducer, defaultState);

See a complete example on CodeSandbox.
If you want to see an example in a real world application, have a look at react-pin-field.


Development environment is managed by Nix. First you need to install it:
curl -L | sh

Then you can start your development environment by spawning a Nix shell:

Now you should be able to clone the repo and install Node.js dependencies:
git clone
cd react-use-bireducer

You can leave the development environment either by killing your terminal or by entering the command exit.


Tests are handled by Jest (.test files) and React Testing Library (.spec files).
yarn test

Similar projects

the state reducer exposes a third argument called exec to schedule effects mix between useEffectReducer and useBireducer


github paypal ko-fi buy-me-a-coffee liberapay