Introducing React Easy State by RisingStack

Hi! About a year ago I created React Easy State – a moderately popular React state manager – which currently has around 1.8K stars, and a small but enthusiastic community forming around it. Unfortunately, I didn’t have enough time to keep up with the blooming community in the last couple of months.

I’m happy to announce, that this situation ends today!

React Easy State just got moved under RisingStack and receives company support from now on. The new, enthusiastic support team without licensing changes makes me really excited about the future!

Special shoutout to my colleauges, Roland Szoke, Peter Czibik and Daniel Gergely who already contributed immensely to this project in the past weeks! <3

So what is React Easy State?

React Easy State is a transparent reactivity based state manager for React. In practical terms: it automagically decides when to render which components without explicit orders from you.

import React from 'react';
import { store, view } from 'react-easy-state';

const counter = store({
  num: 0,
  increment: () => counter.num++
});

// this component re-render's when counter.num changes
export default view(() => (
  <button onClick={counter.increment}>{counter.num}</button>
));

Why should I use it?

Transparent reactivity is not a new idea, Vue and React’s Mobx are popular libraries that implement it. So how does Easy State differ from these?

The technical edge

Historically, transparent reactivity libraries could only work with basic get and set operations. Slightly more complex use cases – like arrays or delete operations – required special handling, which killed the ‘transparent vibe’. Then came Proxies, a meta-programming addition to JavaScript.

Proxies can intercept language operations which were not previously possible. They gave a huge boost to transparent reactivity libraries and both MobX and Vue embraced them since.

Instead of embracing them, Easy State’s core was born out of Proxies 4 years ago, back when they were an experimental API in Chrome only. It is not carrying any bloat from the pre-proxy era and it had a long time to mature during those 4 years. This advantage is noticeable both in the minimalistic API and the stability of the library.

Check out how it holds up against exotic language operations in my Stress Testing React Easy State article.

Practical simplicity

The everyday API consists of two functions only. The rest is automagic and contextual clues to let you focus on business logic instead of reading docs.

Handling global state in React was always a bit clumsy. With Easy State you can create both global and local state with the same API by placing the state accordingly.

Global state

import React from 'react';
import { store, view } from 'react-easy-state';

// this state is defined globally and can be shared between components
const counter = store({
  num: 0,
  increment: () => counter.num++
});

export default view(() => (
  <button onClick={counter.increment}>{counter.num}</button>
));

Local state

import React from 'react';
import { store, view } from 'react-easy-state';

export default view(() => {
  // this state is defined inside the component and it is local to the component
  const counter = store({
    num: 0,
    increment: () => counter.num++
  });

  return (<button onClick={counter.increment}>{counter.num}</button>);
});

So why move under RisingStack?

How does an already stable library benefit from RisingStack’s support? The core is pretty much ‘done’, it didn’t need any commits for the last 13 months. The React port – which is React Easy State – is a different story though. You probably know that React is in the middle of an exciting transition period with hooks and the upcoming asyncAsynchrony, in software programming, refers to events that occur outside of the primary program flow and methods for dealing with them. External events such as signals or activities prompted by a program that occur at the same time as program execution without causing the program to block and wait for results are examples of this category. Asynchronous input/output is an... API.

These changes have to be tied together with the core in an intuitive way which is not an easy task. This is where RisingStack is a huge help.

Together we can react quickly to React changes (pun intended).

Join the community today!