https://github.com/monojack/immerx-react
React bindings for immerx
https://github.com/monojack/immerx-react
fractal immer immerx observable react state
Last synced: 5 months ago
JSON representation
React bindings for immerx
- Host: GitHub
- URL: https://github.com/monojack/immerx-react
- Owner: monojack
- Created: 2020-05-08T15:05:54.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T05:24:15.000Z (almost 3 years ago)
- Last Synced: 2025-05-04T23:33:57.517Z (5 months ago)
- Topics: fractal, immer, immerx, observable, react, state
- Language: JavaScript
- Size: 789 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
**React** bindings for [ImmerX](https://github.com/monojack/immerx)
### `Basic usage`
The following example assumes that you are already familiar with **ImmerX**
**`index.js`**
```js
import React from 'react'
import { render } from 'react-dom'
import { create } from '@immerx/react'
import App from './App'
import './styles.css'
create({
counter: { count: 0 },
times: 0,
})
const rootElement = document.getElementById('root')
render(, rootElement)
```
**`App.js`**
```js
import React from 'react'
import { useImmerx } from '@immerx/react'
import Counter from './Counter'
export default function App() {
const [state] = useImmerx()
return (
<>
You clicked: {state.times} times
>
)
}
```
**`Counter.js`**
```js
import React from 'react'
import { useImmerx } from '@immerx/react'
const lens = {
get: state => state.counter,
set: (stateDraft, counter) => {
stateDraft.counter = counter
stateDraft.times += 1
},
}
export default function Counter() {
const [state, update] = useImmerx(lens)
const increment = () => update(draft => void (draft.count += 1))
const decrement = () => update(draft => void (draft.count -= 1))
return (
<>
count: {state.count}
-
+
>
)
}
```
[](https://codesandbox.io/s/immerx-react-counter-ie5ce?fontsize=14&hidenavigation=1&theme=dark)
**NOTE:** Always memoize your lenses or define them outside the function if they're not derived from props, because the `state$` observable synchronously emits the current state value to incoming subscribers.
Otherwise, the isolated `state` will emit an update
**->** the `lens` is re-created
**->** a new isolated `state` is created with the new `lens` and it emits another update
**->** the `lens` is re-created
...
:boom: :fire: :fire: