Easy State is a practical state management library for React.
React is changing swiftly these days and the ecosystem has to keep up. Easy State's v6.1.0 update adds hooks support, StrictMode compatibility and batching improvements without any API changes.
Hooks
Thanks to the participants of this issue, the core of Easy State now supports hooks and local state stores in function components. Let's take a look at three variants of the same counter app for a quick demo.
Class with local state
This is the old-school version of local state management with Easy State, which will continue to work after the v6.1.0 update.
import React, { Component } from 'react'
import { view, store } from 'react-easy-state'
class Counter extends Component {
counter = store({ num: 0 })
increment = () => this.counter.num++
render() {
return <button onClick={this.increment}>{this.counter.num}</button>
}
}
export default view(Counter)
It creates a local state store as a class property which is unique per component instance. Multiple instances of this counter increment separately.
Function with local state
This version is available with Easy State v6.1.0+ and React v16.8.0(alpha)+ only.
import React from 'react'
import { view, store } from 'react-easy-state'
export default view(() => {
const counter = store({ num: 0 })
return <button onClick={() => counter.num++}>{counter.num}</button>
})
Calling store
inside a function component creates a local state store which is unique per component instance. Multiple instances of this counter increment separately.
The
store
function has been improved to behave like a React hook when it is called from a function component.
Function with global state
This version worked before the update and will continue to work after it.
import React from 'react'
import { view, store } from 'react-easy-state'
// a single store is created outside of the component
const counter = store({ num: 0 })
const increment = () => counter.num++
export default view(() => (
<button onClick={increment}>{counter.num}</button>
))
Global store
s are shared between all components. Multiple instances of the above counter increment together.
Performance
This release includes a pretty big core change which deserves some benchmarking. I updated some js-framework-benchmark entries to React 16.8 and rewrote the Easy State implementation to use function components only. These are the results of a 10x benchmark run on my MacBook.
The benchmark is included for good measure, please consider the following points before jumping to conclusions.
- These benchmarks do not matter as long as the user gets a smooth 60 fps experience.
- Most React projects have not been updated to use hooks yet.
- These kind of benchmarks are useful to rule out very slow libraries, but you should not make decisions based on tiny performance differences. I use them avoid adding accidental performance issues with updates.
Other changes
Automatic sync batching was added for native DOM event handlers to improve performance.
-
Rewrote the batching implementation to use React's
unstable_batchedUpdates
.- Components will no longer render twice if a related store and their props are both changed in a single sync batch.
- Components are always rendered in a parent-child order in a single batch.
- The
batch
function is just an alias ofunstable_batchedUpdates
.
Fixed a bug with ES6 Maps and Sets, where object values with nested data were not reactive sometimes.
Tests are wrapped with
<StrictMode>
to guarantee the compatibility with tomorrow's React.Added a React Native example and test coverage for React Native.
Added typings for the
batch
function. (Thanks to moritzuehling)Improved docs.
The future
The most exciting Concurrent React updates are still in the making. Easy State will likely receive another update after the stabilization of ConcurrentMode
and the scheduler
package, which will let it hook into React's new async scheduler instead of the current custom batching.
If this article captured your interest please help by sharing it. Also, check out the Easy State repo and leave a star before you go.
Thanks!
Top comments (0)