Introduction

There are many libraries to provide global state in React. React itself doesn’t provide such a feature, probably because separation of concerns is important and having global state naively is not idiomatic. However, in certain cases, having global state is good as long as it’s properly implemented. It’s likely that performance drops down compared to using non-global state (incl. multiple contexts).

This post introduces a library for global state with performance.

Introduction

If you had already used Redux and loved it, you might not understand why people try using React context and hooks to replace Redux (a.k.a no Redux hype). For those who would think Redux DevTools Extension and middleware are nice to have, Redux and context + hooks are actually two options. Context + hooks is just fine to share state among components, however if apps get bigger, they are likely to require Redux or other similar solutions; otherwise they end up having many contexts that can’t be handled very easily. (I’d admit this is hypothetical and we would be able to find better solutions in the future.)

Introduction

Global state or shared state is one of the biggest issues when you start developing a React app. Should we use Redux? Do hooks provide a Redux-like solution? I would like to show four patterns toward using Redux. This is my personal opinion and mainly for new apps.

Pattern 1: Prop passing

Some might think it wouldn’t scale, but the most basic pattern should still be prop passing. If the app is small enough, define local state in a parent component and simply pass it down to child components. I would tolerate two level passing, meaning one intermediate component.

Introduction

Recently, React Redux released hooks API. It’s v7.1.0-alpha.4 as of writing.

https://github.com/reduxjs/react-redux/releases/tag/v7.1.0-alpha.4

On the other hand, I’ve been developing a new React Redux binding library with hooks and Proxy.

https://github.com/dai-shi/reactive-react-redux

It’s time to benchmark both of them to have better understanding in performance. The reactive-react-redux library utilizes Proxy to auto-detect state usage, hence it technically has overhead which would affect performance. We would like to learn how much it will be affected in a realistic example.

Introduction

React Redux is one of popular web tech stacks. As I found React hooks so promising, I have been developing a hooks-based library for React Redux called “reactive-react-redux.”

https://github.com/dai-shi/reactive-react-redux

Coding style using this library is mentally different from the official react-redux. Thanks to Proxy, developers don’t need to care about optimization, but just focus on composition of logic.

This library provides two basic hooks: useReduxState and useReduxDispatch. This article shows example code how to use them.

This short article shows code examples how hooks are analogous to components in terms of composition. Without a word, let’s jump in the code.

React components

Let’s use a minimalistic example. Here’s a component.

const Person = ({ person }) => (
  <div>
    <div className="personFirstName">
      <span>First Name:<span>
      <span>{person.firstName}</span>
    </div>
    <div className="personLastName">
      <span>Last Name:<span>
      <span>{person.lastName}</span>
    </div>
  </div>
);

Well, this component is a little bit big, so let’s split it into functions and compose them.

Background

React 16.8 added a new API, Hooks. If you haven’t learned hooks yet, go to the official site and read the entire document before continuing this article.

https://reactjs.org/docs/hooks-intro.html

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. This… reactjs.org This article is about how to create custom hooks for data fetching. As described in the roadmap, React is planning to release react-cache and Suspense for data fetching in the near future. This is going to be a standard way of data fetching in React, however, data fetching with useEffect is still useful in certain use cases where the lifecycle of fetched data is the same as that of components. In such use cases, caching is not important and we can safely store fetched data in a component local state.

Introduction

According to React 16.x Roadmap, we are expecting Concurrent Mode soon.

React 16.x (~Q2 2019): The One with Concurrent Mode Concurrent Mode lets React apps be more responsive by rendering component trees without blocking the main thread. It is opt-in and allows React to interrupt a long-running render (for example, rendering a new feed story) to handle a high-priority event (for example, text input or hover). Concurrent Mode also improves the user experience of Suspense by skipping unnecessary loading states on fast connections.

... Read More

Introduction

While I don’t feel like coding React without hooks, react-cache still seems to be still far away. Surely, caching in data fetching important, nevertheless I would like to seek possibilities of implementations only with React Hooks. These might be obsoleted in the future, but I want something today, that is “useFetch”. This could be still useful without react-cache in case sophisticated caching is not necessary.

I’ve started developing “useFetch” as a tutorial to build a custom hook.

Introduction

React Hooks is something I’ve been working on lately. What’s wonderful is creating custom hooks. If you encapsulate logic nicely in a hook, it can be shared among components and used intuitively. You can find my custom hooks in my GitHub repos, some of which are very experimental.

This time, my experiment is to combine React Hooks and Web Workers. I know it’s not too difficult, but let me explain a bit in this short article.