https://github.com/monojack/react-immer

No nonsense state management with Immer and React hooks
https://github.com/monojack/react-immer

immer react-hooks reactjs render-props state-management

Last synced: 2 months ago
JSON representation

No nonsense state management with Immer and React hooks

• Host: GitHub
• URL: https://github.com/monojack/react-immer
• Owner: monojack
• License: mit
• Created: 2018-11-22T20:26:36.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T15:22:59.000Z (almost 3 years ago)
• Last Synced: 2025-07-19T10:07:19.728Z (3 months ago)
• Topics: immer, react-hooks, reactjs, render-props, state-management
• Language: JavaScript
• Size: 1.06 MB
• Stars: 13
• Watchers: 2
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
## react-immer

[![Build Status](https://travis-ci.org/monojack/react-immer.svg?branch=master)](https://travis-ci.org/monojack/react-immer)

[![npm version](https://img.shields.io/npm/v/react-immer.svg)](https://www.npmjs.com/package/react-immer)

[![npm downloads](https://img.shields.io/npm/dm/react-immer.svg)](https://www.npmjs.com/package/react-immer)

[![minified size](https://badgen.net/bundlephobia/min/react-immer)](https://bundlephobia.com/result?p=react-immer@latest)

No nonsense state management with [Immer](https://github.com/mweststrate/immer) and [React hooks](https://reactjs.org/docs/hooks-intro.html)

**TL;DR**

`index.js`

```js

import React from 'react'

import ReactDOM from 'react'

import { createStore } from 'react-immer'

import Counter from './Counter'

createStore({ count: 1 })

function App() {

  return 

}

const rootElement = document.getElementById('root')

ReactDOM.render(, rootElement)

```

 

`Counter.js`

```js

/* Counter.js */

import React from 'react'

import { useImmer } from 'react-immer'

export default function Counter() {

  const [{ count }, produce] = useImmer({ count: state => state.count })

  const decrement = draft => {

    draft.count -= 1

  }

  const increment = draft => {

    draft.count += 1

  }

  return (

    


       produce(decrement)}>-

      {count}

       produce(increment)}>+

    

  )

}

```


[![Edit react-immer-tldr](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/yq328o9rvx)

What's cool about **react-immer** is that if you don't support [Hooks](https://reactjs.org/docs/hooks-intro.html) yet, you can use it inline and it will work like a [render prop](https://reactjs.org/docs/render-props.html). In this case, it takes two arguments, the _spec object_ and the _render function_.

```js

import { useImmer } from 'react-immer'

// ...

// useImmer(specObj, renderFn)



  {useImmer({ count: state => state.count }, ({ count }, produce) => (

    

       produce(decrement)}>-

      {count}

       produce(increment)}>+

    

  ))}



```


Or, if you don't like the syntax, you can always use the **Immer** component

```js

import { Immer } from 'react-immer'

// ...

 state.count }}>

  {({ count }, produce) => (

    

       produce(decrement)}>-

      {count}

       produce(increment)}>+

    

  )}

```