Introduction

It’s been a while since I started developing reactive-react-redux and react-tracked. These libraries provide so called state usage tracking to optimize render in React. This approach, I think, is pretty novel and quite a lot of my effort has been put to improve its performance.

Lately, I thought it would be nicer if this can be used more broadly. I wondered if it can be used in vanilla JS. What would be an API in vanilla JS? It would be good if it’s easy to understand. My idea ended up with memoization, mainly because the primary goal is to be a replacement of reselect.

Introduction

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

• react-tracked
• react-hooks-global-state

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.

Introduction

Redux is a framework-agnostic library for global state. It’s often used with React.

While I like the abstraction of Redux, React will introduce Concurrent Mode in the near future. If we want to get benefit of useTransition, state must be inside React to allow state branching. That means we can’t get the benefit with Redux.

I’ve been developing React Tracked for global state that allows state branching. It works well in Concurrent Mode. That leaves me a question: What is a use case that only Redux can do.

Introduction

Developing with React hooks is fun for me. I have been developing several libraries. The very first library was a library for global state. It’s naively called “react-hooks-global-state” which turns out to be too long to read.

The initial version of the library was published in Oct 2018. Time has passed since then, I learned a lot, and now v1.0.0 of the library is published.

https://github.com/dai-shi/react-hooks-global-state

This post shows simplified versions of the code step by step. It would help understand what this library is aiming at, while the real code is a bit complex in TypeScript.

Introduction

This is a short post about my small library.

Apollo Client is a library for GraphQL. Apollo Link is an interface to extend Apollo Client.

Typically, you would initialize apollo client like this.

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';

const cache = new InMemoryCache();
const link = new HttpLink({ uri });

const client = new ApolloClient({
  cache: cache,
  link: link,
});

I want to define the link in another file and lazy load it, because it is not an HttpLink but a complicated large link.

Introduction

I have been developing React Tracked, which is a library for global state with React Hooks and Context.

https://react-tracked.js.org

This is a small library and focuses on only one thing. It optimizes re-renders using state usage tracking. More technically, it uses Proxies to detect the usage in render, and only triggers re-renders if necessary.

Because of that, the usage of React Tracked is very straightforward. It is just like the normal useContext. Here’s an example.

Introduction

React released Concurrent Mode in the experimental channel and Suspense for Data Fetching. This release is for library authors, and not for production apps yet. The new data fetching pattern proposed is called Render-as-You-Fetch.

This post mainly discuss Render-as-You-Fetch for basic fetch calls, like calling REST APIs. But, some of discussions are not limited to REST. One could invoke GraphQL endpoints with simple fetch calls. For more complex use cases with GraphQL, it’s worth looking into Relay documentation too.

Introduction

We have been waiting for “Suspense for Data Fetching” for a long time. It is now provided as an experimental feature in the experimental channel.

Check out the official docs for details.

1. Introducing Concurrent Mode
2. Suspense for Data Fetching
3. Concurrent UI Patterns
4. Adopting Concurrent Mode
5. Concurrent Mode API Reference

They are trying best to explain new mind sets with analogies. That means it’s totally different from the usage with traditional React. Yes, it is different and promising.

Introduction

I have been developing a React Hooks library called React Tracked. This is the library I put much effort lately as well as my other libraries.

https://github.com/dai-shi/react-tracked

This library solves a performance issue with React Context. For those who are interested in the fundamental problem, please take a look at the long issue.

What’s notable in this library is that it doesn’t provide any new fancy features. You can simply replace Context.Provider and useContext with the custom ones, it just works with performance.

Introduction

It is said that Redux has been overused in some use cases and React context+hooks plays well in such use cases. While I agree with it, Redux should work well in some other situations. Redux should help developing larger apps with many developers. Various libraries in Redux ecosystem should accelerate development. There’s another situation in which Redux may help, and that is Web Workers.

A while back, Surma posted a nice blog post: React + Redux + Comlink = Off-main-thread