React Easy State v6.1.0: Hooks, Improved Batching and StrictMode

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 stores 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 of unstable_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!