React Easy State v6.1.0: Hooks, Improved Batching and StrictMode
Tags: react, javascript, webdev, state
Published: 2019-01-31 14:41:21

---
title: React Easy State v6.1.0: Hooks, Improved Batching and StrictMode
published: true
description: React Easy State's v6.1.0 update adds hooks support, StrictMode compatibility and batching improvements without any new API or breaking changes.
tags: react, javascript, webdev, state
cover_image: https://thepracticaldev.s3.amazonaws.com/i/s7qm4m66ip6qf23mvqim.png
---

*[Easy State](https://github.com/solkimicreb/react-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](https://github.com/solkimicreb/react-easy-state/issues/59), 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.

```jsx
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.

```jsx
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.

```jsx
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](https://github.com/krausest/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.

![Benchmark results](https://thepracticaldev.s3.amazonaws.com/i/9wk866dcb28vwqva61vb.png)

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](https://github.com/solkimicreb/react-easy-state/pull/70))

- Improved [docs](https://github.com/solkimicreb/react-easy-state#usage).

## 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](https://github.com/solkimicreb/react-easy-state) and leave a star before you go.*

*Thanks!*