Developing React Global State Library With Atom Abstraction

Inspired by Recoil

Daishi Kato
Webtips

--

Introduction

I have been developing various global state libraries for React. For example:

My main motivation is to eliminate selector functions that are only required for render optimization. Render optimization here means it avoids extra re-renders. An extra re-render is a re-render process that produces the same view result as before.

Since Recoil is announced, I’m very interested in atom abstraction because it eliminates selector functions for render optimization and the API seems pretty intuitive.

I couldn’t help stopping creating something by myself. This post introduces my challenges up to now with some notes.

Recoildux

My first challenge was to use a Redux store as an atom. Redux itself is very lightweight. Although the ecosystem assumes only one Redux store exists in an app, we could technically create as many stores as we want.

I have already developed a react redux binding for Concurrent Mode. It uses the upcoming useMutableSource hook, and most notably it doesn’t depend on React Context.

--

--