DEV Community: C

Must predictable state changes come at a high cost?

Fri, 09 Jun 2023 05:23:30 +0000

In state management of a frontend app, how to change states has been a vital problem since the early days. Today's widely accepted state management libraries have similar ways of getting states but different ways of changing states. For each of the libraries, one of the aspects developers care about most is how predictable state changes are.

After I dealt with various state changes using various libraries, I realized one problem, predictability comes at a high cost in today's practice. Then, I started to ask the question of this article's title and to expect to explore a better practice, if possible.

It has been challenging for me to review the firmly accepted ideas in my head to find out what might not be good enough. And now, I'd like to share some of my thoughts with you to look deeper into state changes together in terms of predictability.

What does it mean by predictable?

First things first, predictable state changes mean state changes are easy to reason about. That is, in other words, what, why, when, and how states are changed are easy to understand.

Previously in MVC pattern, state changes are pretty hard to reason about. Every model hosts a state on its own and emits events of its state changes. When a model gets interested in a state change in some model, it subscribes to the event of that state change in that model. As a result, models get massively interconnected. Any state change may lead to "a tangled weave of data flow". The understanding of what, why, when, and how states are changed gets lost.

With this knowledge, let's check out how predictable are state changes in today's widely accepted state management libraries. Thinking that the battle of state management is more intense in React than in other frameworks, I'd take some of the typical state management libraries in React as the typical examples for the discussion here, which include Redux, Recoil, and MobX. (Please grab yourself some basic knowledge about the libraries if needed.)

In Redux, a procedure of state changes is a unidirectional data flow that actions are dispatched, reducers respond, then new states are produced. The single direction enforces, no matter whether an action is a plain action that only gets itself dispatched or a thunk action that gets more actions dispatched, once it finishes getting dispatched, no other actions will be dispatched anywhere downstream. Therefore, what, why, and when states are changed become easy to understand. As for how states are changed, if only plain actions are dispatched, it's determined by how responding reducers are defined. If some thunk actions are dispatched, it's determined by both how thunk actions are defined and how responding reducers are defined. Because reducers are pure functions modeled after math functions that don't have side effects, the major part of how states are changed becomes easy to understand. As a result, state changes in Redux become quite predictable.

In Recoil, a procedure of state changes is a combination of directly invoking state setters. The side effect of a state setter is restricted and doesn't get any other state setters invoked. Therefore, what, why, and when states are changed become easy to understand. As for how states are changed, it's determined by how procedures of invoking state setters are defined. Usually, procedures of invoking state setters can be encapsulated as hooks in Recoil, but hooks are not as easy to understand as pure functions because of side effects. So, state changes are less predictable in Recoil than in Redux.

In MobX, a procedure of state changes is a combination of directly assigning values to states that are marked observable. The side effect of an assignment is restricted and doesn't get any value assigned to other observable states. Therefore, what, why, and when states are changed become easy to understand. As for how states are changed, it's determined by how procedures of assigning values to observable states are defined. Usually, procedures of assigning values to observable states can be encapsulated as class methods in MobX, but class methods are not as easy to understand as pure functions because of side effects. So, state changes are less predictable in MobX than in Redux.

To sum up, Redux stands out in terms of predictability.

The drawback of Redux

Though, Redux is not perfect and has a drawback. If we take a closer look at its unidirectional data flow, event -> action -> reducer -> state, it's lengthy. No matter how simple a state change is, always at least one action and at least one reducer are involved. In comparison, a state change in either Recoil or MobX goes much easier. The lengthiness dramatically increases the cost of use in Redux.

But, is the lengthiness necessary for predictability? One thing I notice is, it is the single direction of the data flow making what, why, and when states are changed easy to understand. Another noticeable thing is, it is that reducers are pure functions making how states are changed easy to understand. So, the fact is, actions don't contribute to predictability. Then, the lengthiness can be resolved without affecting predictability.

However, if so, why did actions come into being? I'd trace back Redux to its predecessor, Flux. In Flux, the unidirectional data flow is event -> action -> dispatcher -> reducer -> state. Although this is even lengthier because of the presence of the singleton dispatcher, every part of this still makes sense because the sub-flow, action -> dispatcher -> reducer, makes it doable for a reducer to wait for other reducers. As for what a reducer waits for other reducers to do, it's almost always for deriving data across states represented by reducers. But, when Redux inherits the core idea from Flux, selectors are added for deriving data, then the dispatcher is discarded so it's no longer doable for a reducer to wait for other reducers. As a result, actions no longer contribute to deriving data so become sort of pointless in terms of either functionality or predictability.

Possibility of predictability at a low cost

Now that the lengthiness is not necessary for predictability, predictable state changes don't have to come at a high cost. Thus, it would be possible to design a new state management library that achieves predictable state changes at a low cost. As the need of managing states is quite common, a new library of this kind would bring huge benefits to the future frontend development. Let's try exploring it as follows.

First, I'd circle back a bit to Redux, Recoil, and MobX. In each of those libraries, what, why, and when states are changed are easy to understand because (1) state changes don't get other unexpected state changes triggered. In Redux, how states are changed is easy to understand because (2) it's mainly defined by reducers as pure functions. That is, these two points are just sufficient for predictable state changes. Anything else is not important in terms of predictability so can be simplified. Thus, one of the feasible ways to design a solution for the goal would be, state changes don't get other unexpected state changes triggered and meanwhile only involve reducers.

Then, let's think about the form of a reducer for changing one state in this solution. On one hand, it accepts an old state and produces a new state. On the other hand, it accepts payloads directly as per events. So, what it looks like would be:

function highlight(state: StateA): StateA {
  return { ...state, highlighted: true };
}

function setText(state: StateA, text: string): StateA {
  return { ...state, text };
}

function setHint(state: StateA, hint: string, hintColor: Color): StateA {
  return { ...state, hint, hintColor };
}

Next, let's think about the form of a reducer for changing multiple states in this solution. On one hand, it accepts multiple old states and produces multiple new states in the same order. On the other hand, it accepts payloads directly as per events. So, what it looks like would be:

function setTextAndSwitchMode(
  [stateA, stateB]: [StateA, StateB],
  text: string,
  mode: Mode
): [StateA, StateB] {
  return [
    { ...stateA, text },
    { ...stateB, mode },
  ];
}

Afterward, let's see the behavior of the procedure involving these reducers to change states. The point here is, the procedure doesn't get other unexpected state changes triggered. As reducers are simply pure functions, what the procedure looks like would simply be:

const oldStateA = getState(keyOfStateA);
const newStateA = highlight(oldStateA);
setState(keyOfStateA, newStateA);

With the procedure encapsulated as a reusable function such as operate, the procedure can evolve into:

operate(keyOfStateA, highlight);

operate(keyOfStateA, setText, 'Lorem ipsum');

operate(keyOfStateA, setHint, 'Ut enim', Color.GOLD);

operate([keyOfStateA, keyOfStateB], setTextAndSwitchMode, 'Duis', Mode.QUIET);

Furthermore, taking a closer look at the first param of a operate, it would be found that the role of a keyOf... is to identify a state. But declaring a series of unique strings for that is very costly. To lower this cost, one of the approaches is to make the most of something that already exists necessarily in state management, which, then, reminds me of state definitions.

A state definition requires (1) a default state value and (2) a state type. And now, a state definition is going to be made able to (3) identify the state it defines. So, what would it look like? After thinking for a while, there, in JS, just happen to be a matching concept that can fulfill those three points all together, which is Plain Old JavaScript Object(POJO). A POJO as a state definition is able to host a default state value, declare a state type, and identify the state it defines at the same time. Hence, a procedure of state changes with POJOs as state definitions can further evolve into:

interface StateA {
  highlighted: boolean;
  text: string;
  hint: string;
  hintColor: Color;
}

const defOfStateA: StateA = {
  highlighted: false,
  text: '',
  hint: '',
  hintColor: Color.BLACK,
};

interface StateB {
  mode: Mode;
}

const defOfStateB: StateB = {
  mode: Mode.NOISY,
};

// ...

operate(defOfStateA, highlight);

operate(defOfStateA, setText, 'Lorem ipsum');

operate(defOfStateA, setHint, 'Ut enim', Color.GOLD);

operate([defOfStateA, defOfStateB], setTextAndSwitchMode, 'Duis', Mode.QUIET);

With a solution like this, predictable state changes come at a low cost.

To make the solution complete, fundamental blocks of state management like getting states with or without selectors, subscribing to state changes, and integrating with frameworks are also needed. For your convenience, here is an open-source in-progress project implemented following the idea above: https://github.com/statofu/statofu . You are very welcome to fork it or open issues in it to join the exploration.

Review of state management in React: summary and prospect

Sun, 02 Apr 2023 13:00:00 +0000

In the initial article, thinking that doing good state management is necessary to develop a good React app but there is no clear winner yet among today's widely-accepted libraries of state management in React, 2 questions were raised:

How good are today's widely-accepted libraries of state management in React?
What does a better library of state management in React look like?

Then, with the example of the composite clock built with MVC pattern from the initial article as a baseline, in the previous articles, for each widely-accepted library of reducer-like solutions, facebook's experiment, lightweight trials, I've rebuilt the same example module with it and reviewed how good it is in comparison with the baseline to answer the question #1.

And now, by this article, I would summarize all of those reviews for a more comprehensive overall understanding of today's widely-accepted libraries of state management in React, then find out useful insights and try to give a prospect of a better library to answer the question #2.

Summary for today's widely-accepted libraries
Prospect of a better library
Postscript

Summary for today's widely-accepted libraries

Firstly, for an easy reference, let me collect briefs of all the previous reviews from the previous articles as follows:

MVC pattern:

Pros: The app domain being clearly split.
Cons: Unpredictable states changing due to difficulties in fully tracking state-changing events.
Sum-up: Unpredictable states changing (but with limited benefits in other aspects).

Redux family:

Pros: Predictable one-state changing without tracking logics in any function bodies and predictable multi-state changing at limited cost of tracking involved reducers/slices in function bodies of actions.
Cons: (1) High coupling between reducers/slices and their actions. (2) Incomplete modularization by default.
Sum-up: Predictable states changing at limited cost of only tracking multi-state changing logics but at high overall cost of development.

Recoil:

Pros: (1) Predictable states changing at limited cost of tracking invoked set calls in function bodies of state-changing hooks. (2) Nestability of Recoil roots.
Cons: (1) Handling asynchronousness burdens. (2) Naming unique keys for states.
Sum-up: Predictable states changing at limited cost of tracking state-changing logics as well as at extra cost of handling asynchronousness burdens and naming unique keys for states.

MobX:

Pros: (1) Predictable states changing at limited cost of tracking changed store properties in function bodies of store methods. (2) The app domain being clearing split.
Cons: A strong understanding of MobX's subscription mechanism needed.
Sum-up: Predictable states changing at limited cost of tracking state-changing logics as well as at extra cost of correctly using the subscription mechanism.

Zustand:

Pros: Predictable one-state changing without tracking logics in any function bodies and predictable multi-state changing at limited cost of tracking invoked store functions in function bodies of multi-state changing hooks and multi-state changing hooks.
Cons: (1) High coupling between stores and their multi-state changing hooks. (2) Incomplete modularization by default. (3) No strong support is provided for data deriving and initial states assigning.
Sum-up: Predictable states changing at limited cost of only tracking multi-state changing logics but at a bit high overall cost of development.

Jotai:

Pros: (1) Predictable states changing at limited cost of tracking invoked set calls in function bodies of state-changing hooks. (2) Nestability of Jotai store providers.
Cons: Not much.
Sum-up: Predictable states changing at limited cost of tracking state-changing logics.

Valtio:

Pros: Predictable states changing at limited cost of tracking changed state proxies in function bodies of state-changing hooks.
Cons: (1) Incomplete modularization by default. (2) No strong support is provided for initial states assigning.
Sum-up: Predictable states changing at limited cost of tracking state-changing logics as well as at extra cost of resolving incomplete modularization.

Some details referenced later might not be listed here but you can always find them in the previous articles.

In terms of the pros of the widely-accepted libraries, they all achieve predictable states changing at limited cost of tracking state-changing logics to some extent. (1) Libraries like Redux family and Zustand achieve predictable states changing at limited cost of only tracking multi-state changing logics. In libraries of this kind, a one-state changing procedure is defined in a way of getting what one state it changes to be understood clearly by only checking its declarative information. A multi-state changing procedure is defined by involving one-state changing procedures arbitrarily. (2) Libraries like Recoil and MobX achieve predictable states changing at limited cost of tracking both one-state changing logics and multi-state changing logics. In libraries of this kind, a state-changing procedure is defined by invoking state-changing calls to one or more states arbitrarily.

Libraries of kind #1 achieve more predictable states changing than those of kind #2, because the less state-changing logics need to be tracked, the less chances of untracked state-changing logics for unpredictability come. But, on the other hand, because high coupling between one-state changing precedures and multi-state changing procedures in libraries of kind #1 is unavoidable, overall cost of development with libraries of kind #1 is high. So, it's hard to tell libraries of which kind are better.

In terms of the cons of the widely-accepted libraries, except the by-design cons like high coupling that are binded with the pros, the cons are mostly caused by the preferences. (1) Like Redux, RTK, Zustand and Valtio, the preference of organizing states as app-wide ones by default leads to incomplete modularization by default. (2) Like Recoil, the preference of caring much about asynchronousness lets in burdens of handling it. (3) Like MobX, the preference of working independently from React results in a strong understanding of MobX's subscription mechanism. (4) Like Zustand and Valtio, the preference of no strong support for fundamental usages like data deriving and initial states assigning decreases the usability.

The by-preference cons bring more inconvenience than convenience in state managemenet, so the less cons of this kind are there, the better a library becomes. From the perspective of this, Jotai stands out a bit.

Prospect of a better library

Next, let me get into the question #2, What does a better library of state management in React look like?. Today, some libraries achieve predictable states changing at limited cost of only tracking multi-state changing logics but at high overall cost of development, other libraries achieve predictable states changing at limited cost of tracking both one-state changing logics and multi-state changing logics but can end up with acceptable overall cost. So, what if here comes a new library that achieves predictable states changing without tracking either one-state changing logics or multi-state changing logics? Then, that will be the better library that achieve more predictable state changing than ever. And, the question becomes, how to design a new library of that kind?

Thinking of Redux, one-state changing logics are defined by reducers. Because each reducer is a pure function that processes one state to return a new state of the one without any side effects, what one state a reducer changes can be clearly understood by only reading the reducer's function declaration, which makes one-state changing in Redux predictable without tracking logics in any function bodies. So, what if, in the new library, both one-state changing logics and multi-state changing logics can be defined by reducers? Then, both one-state changing and multi-state changing become predictable without tracking logics in any function bodies. Also, as multi-state changing logics don't have to depend on one-state changing logics any more, high coupling between one-state changing and multi-state changing in Redux gets eliminated, which lowers overall cost of development. Reducers of that kind can be depicted as follows:

type Reducer<TStates, TPayloads extends []> = (
  oneOrMoreStates: TStates,
  ...payloads: TPayloads
) => TStates;

Further more, every rest part involved in state management is supposed to be designed for low cost, too. For representing a state, the simplest form would be a state config that identifies the state and provides the default state along with the state type. Then, a Plain Old JavaScript Object(POJO) can do the job well. To distinguish state configs from the states they represent, I can put the prefix $ to names of these POJOs of state configs. For representing a derived datum, the simplest form would be the calculation procedure itself. Then, a pure function of a getter on one or more states can work. They can be depicted as follows:

// The config of the 'stateA'
const $stateA: StateA = {
  ...
};

interface StateA {
  ...
}

// The calculation procedure of the 'derivedDatumX'
function getDerivedDatumX(...): ... {
  ...
};

I would call this new library of state management in React as 'MyLib' for now. The minimal interfaces provided by MyLib are can be listed as follows. The 'operate' invokes reducers for states changing. The 'snapshot' accesses states for rendering. The 'store' along with the store provider host states:

import type { PropsWithChildren } from 'react';

export interface MyBaseState {}

export interface MyOperate {
  <TFn extends AnyFn>(
    $oneOrMoreStates: Parameter0<TFn>,
    fn: TFn,
    ...payloads: ParametersExcept0<TFn>
  ): ReturnType<typeof fn>;
}

export function useMyOperate(): MyOperate;

export function useMySnapshot<TState extends MyBaseState>($state: TState): TState;
export function useMySnapshot<TState extends MyBaseState, TValue = TState>(
  $state: TState,
  select: (state: TState) => TValue
): TValue;

export interface MyStore {
  getState<TState extends MyBaseState>($state: TState): TState;

  setState<TState extends MyBaseState>(
    $state: TState,
    stateOrGetState: TState | ((oldState: TState) => TState)
  ): TState;
}

export interface MyStoreProviderProps extends PropsWithChildren {
  initialize?(store: MyStore): void;
}

export function MyStoreProvider(props: MyStoreProviderProps): ReactElement;

export function useMyStore(): MyStore;

type AnyFn = (...args: any) => any;

type Parameter0<TFn extends AnyFn> = TFn extends (arg0: infer P, ...args: any) => any ? P : never;

type ParametersExcept0<TFn extends AnyFn> = TFn extends (arg0: any, ...args: infer P) => any
  ? P
  : never;

The preliminary implementation of MyLib is hosted at review-of-state-management-in-react/05-summary-and-prospect/src/MyLib. Now, let me rebuild the baseline example module with MyLib to check out how good it is in comparison.

For the requirement of the example module, let me recall it a bit in case a reader might not have time to fully read the previous articles. If the previous articles have been read, following paragraphs can be skipped:

A composite clock is an interactive module that has 2 components, an analogue clock and a digital clock. The 2 child clocks always tick synchronously and can be set to new time by users. The analogue one can have its minute hand dragged. The digital one can have its text edited.

Although it's doable to use single big shared state for this example module, it's not always a good idea to use single big shared state for a real-world app because it brings poor maintainability of quality attributes(ISO/IEC 9126-1:2001). So, to closely emulate real-world situations, multiple related states are used here.

Then, there would be 3 related states seperately for the analogue clock, the digital clock and time itself. The state of time keeps a timestamp for the whole module. The states of the child clocks derive display data from the timestamp and accept user input data for setting the timestamp.

Then, create-react-app is used to initialize the React app. The option --template typescript is used to enable TypeScript:

$ npx create-react-app 05-summary-and-prospect --template typescript
# ...
$ cd 05-summary-and-prospect

The version of CRA in use is 5.0.1 and the generated directory structure looks as follows:

$ tree -I node_modules
.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   └── setupTests.ts
└── tsconfig.json

2 directories, 19 files

Then, src/App.tsx is cleared for later use, unused files are removed, the package of time helpers is installed:

// src/App.tsx
import { FC } from 'react';

const App: FC = () => {
  return null;
};

export default App;

$ rm src/App.css src/App.test.tsx src/logo.svg

$ npm i date-fns

Then, to use MyLib, let me copy it into src/MyLib. Besides, to get for...of statements in MyLib to work, tsconfig.json needs to be adjusted a bit:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "downlevelIteration": true
  },
  "include": ["src"]
}

The example module, the composite clock, would be all placed in src/CompositeClock. To match the 3 requried states, there would be 3 groups of state configs, data deriving getters and state-changing reducers.

And for view components, there are AnalogueView.ts for the analogue clock, DigitalView.ts for the digital clock, and CompositeView.ts as a glue. Besides, store providers are initialized at little cost.

The 3 groups of state configs, data deriving getters and state-changing reducers are coded as follows:

// src/CompositeClock/TimeState.ts
export interface TimeState {
  timestamp: number;
}

export const $timeState: TimeState = {
  timestamp: 0,
};

export function changeTimestamp(timeState: TimeState, timestamp: number): TimeState {
  return { ...timeState, timestamp };
}

// src/CompositeClock/AnalogueState.ts
import { changeTimestamp, TimeState } from './TimeState';

const TWO_PI = 2 * Math.PI;

export interface AnalogueAngles {
  hour: number;
  minute: number;
  second: number;
}

export interface AnalogueState {
  isEditMode: boolean;
  editModeAngles: AnalogueAngles;
}

export const $analogueState: AnalogueState = {
  isEditMode: false,
  editModeAngles: { hour: 0, minute: 0, second: 0 },
};

export function getDisplayAngles(timeState: TimeState): AnalogueAngles {
  const d = new Date(timeState.timestamp);
  return {
    hour: ((d.getHours() % 12) / 12) * TWO_PI + (d.getMinutes() / 60) * (TWO_PI / 12),
    minute: (d.getMinutes() / 60) * TWO_PI + (d.getSeconds() / 60) * (TWO_PI / 60),
    second: (d.getSeconds() / 60) * TWO_PI,
  };
}

export function enterEditMode([state, timeState]: [AnalogueState, TimeState]): [
  AnalogueState,
  TimeState
] {
  if (state.isEditMode) return [state, timeState];
  return [{ ...state, isEditMode: true, editModeAngles: getDisplayAngles(timeState) }, timeState];
}

export function exitEditMode(
  [state, timeState]: [AnalogueState, TimeState],
  submit: boolean = true
): [AnalogueState, TimeState] {
  if (!state.isEditMode) return [state, timeState];
  if (submit) {
    const d = new Date(timeState.timestamp);
    d.setHours(
      Math.floor((state.editModeAngles.hour / TWO_PI) * 12) + 12 * Math.floor(d.getHours() / 12)
    );
    d.setMinutes((state.editModeAngles.minute / TWO_PI) * 60);
    d.setSeconds((state.editModeAngles.second / TWO_PI) * 60);
    timeState = changeTimestamp(timeState, d.getTime());
  }
  return [{ ...state, isEditMode: false }, timeState];
}

export function changeEditModeMinuteAngle(
  state: AnalogueState,
  minuteAngle: number
): AnalogueState {
  return {
    ...state,
    editModeAngles: {
      ...state.editModeAngles,
      minute: (minuteAngle + TWO_PI) % TWO_PI,
      hour:
        (Math.floor((state.editModeAngles.hour / TWO_PI) * 12) + minuteAngle / TWO_PI) *
        (TWO_PI / 12),
    },
  };
}

// src/CompositeClock/DigitalState.ts
import { format, isMatch, parse } from 'date-fns';
import { changeTimestamp, TimeState } from './TimeState';

export const DIGITAL_TEXT_FORMAT = 'HH:mm:ss';

export interface DigitalState {
  isEditMode: boolean;
  editModeText: string;
}

export const $digitalState: DigitalState = {
  isEditMode: false,
  editModeText: '',
};

export function getDisplayText(timeState: TimeState): string {
  return format(timeState.timestamp, DIGITAL_TEXT_FORMAT);
}

export function isEditModeTextValid(state: DigitalState): boolean {
  return isMatch(state.editModeText, DIGITAL_TEXT_FORMAT);
}

export function enterEditMode([state, timeState]: [DigitalState, TimeState]): [
  DigitalState,
  TimeState
] {
  if (state.isEditMode) return [state, timeState];
  return [{ ...state, isEditMode: true, editModeText: getDisplayText(timeState) }, timeState];
}

export function exitEditMode(
  [state, timeState]: [DigitalState, TimeState],
  submit: boolean = true
): [DigitalState, TimeState] {
  if (!state.isEditMode) return [state, timeState];
  if (submit && isEditModeTextValid(state)) {
    timeState = changeTimestamp(
      timeState,
      parse(state.editModeText, DIGITAL_TEXT_FORMAT, timeState.timestamp).getTime()
    );
  }
  return [{ ...state, isEditMode: false }, timeState];
}

export function changeEditModeText(state: DigitalState, editModeText: string): DigitalState {
  return { ...state, editModeText };
}

And, view components are coded as follows:

// src/CompositeClock/AnalogueView.tsx
import { FC, useCallback, useEffect } from 'react';
import { useMyOperate, useMySnapshot } from '../MyLib';
import {
  $analogueState,
  changeEditModeMinuteAngle,
  enterEditMode,
  exitEditMode,
  getDisplayAngles,
} from './AnalogueState';
import styles from './AnalogueView.module.css';
import { $timeState } from './TimeState';

const TWO_PI = 2 * Math.PI;

interface Props {
  className?: string;
}

export const AnalogueView: FC<Props> = ({ className }) => {
  const operate = useMyOperate();
  const { isEditMode, editModeAngles } = useMySnapshot($analogueState);
  const displayAngles = useMySnapshot($timeState, getDisplayAngles);

  const angles = isEditMode ? editModeAngles : displayAngles;

  const calcEditModeMinuteAngle = useCallback(
    (pointX: number, pointY: number): number => {
      const pointLen = Math.sqrt(Math.pow(pointX, 2) + Math.pow(pointY, 2));

      const normalizedX = pointX / pointLen;
      const normalizedY = pointY / pointLen;

      const oldX = Math.sin(editModeAngles.minute);
      const oldY = Math.cos(editModeAngles.minute);

      const rawMinuteAngle = Math.acos(normalizedY);

      const minuteAngle =
        normalizedY > 0 && oldY > 0
          ? normalizedX >= 0
            ? oldX < 0
              ? rawMinuteAngle + TWO_PI
              : rawMinuteAngle
            : oldX >= 0
            ? -rawMinuteAngle
            : -rawMinuteAngle + TWO_PI
          : normalizedX >= 0
          ? rawMinuteAngle
          : -rawMinuteAngle + TWO_PI;

      return minuteAngle;
    },
    [editModeAngles]
  );

  const onMinuteHandMouseDown = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      e.preventDefault();
      operate([$analogueState, $timeState], enterEditMode);
    },
    [operate]
  );

  const onMouseLeave = useCallback(() => {
    operate([$analogueState, $timeState], exitEditMode);
  }, [operate]);

  const onMouseUp = useCallback(() => {
    operate([$analogueState, $timeState], exitEditMode);
  }, [operate]);

  const onKeyDown = useCallback(
    (e: KeyboardEvent): void => {
      if (isEditMode && e.key === 'Escape') {
        operate([$analogueState, $timeState], exitEditMode, false);
      }
    },
    [operate, isEditMode]
  );

  const onMouseMove = useCallback(
    (e: React.MouseEvent<HTMLDivElement>): void => {
      if (!isEditMode) return;

      const boundingBox = e.currentTarget.getBoundingClientRect();
      const originX = boundingBox.x + boundingBox.width / 2;
      const originY = boundingBox.y + boundingBox.height / 2;

      const pointX = e.clientX - originX;
      const pointY = originY - e.clientY;

      operate($analogueState, changeEditModeMinuteAngle, calcEditModeMinuteAngle(pointX, pointY));
    },
    [operate, calcEditModeMinuteAngle, isEditMode]
  );

  useEffect(() => {
    window.addEventListener('keydown', onKeyDown);
    return () => window.removeEventListener('keydown', onKeyDown);
  }, [onKeyDown]);

  return (
    <div
      className={`${className ?? ''} ${styles.root} ${isEditMode ? styles.editMode : ''}`}
      onMouseLeave={onMouseLeave}
      onMouseUp={onMouseUp}
      onMouseMove={onMouseMove}
    >
      <div className={styles.axis} />
      <div
        className={`${styles.hand} ${styles.hour}`}
        style={{ transform: `rotateZ(${angles.hour}rad)` }}
      />
      <div
        className={`${styles.hand} ${styles.minute}`}
        style={{ transform: `rotateZ(${angles.minute}rad)` }}
        onMouseDown={onMinuteHandMouseDown}
      />
      <div
        className={`${styles.hand} ${styles.second}`}
        style={{ transform: `rotateZ(${angles.second}rad)` }}
      />
    </div>
  );
};

/* src/CompositeClock/AnalogueView.module.css */
.root {
  margin: 12px;
  padding: 8px;
  width: 160px;
  height: 160px;
  border-radius: 100%;
  border: 1px solid black;
  position: relative;
}

.axis {
  position: absolute;
  background-color: black;
  left: 47.5%;
  top: 47.5%;
  width: 5%;
  height: 5%;
  border-radius: 100%;
}

.hand {
  position: absolute;
  background-color: black;
  transform-origin: bottom center;
}

.hand.hour {
  left: 48.5%;
  top: 25%;
  height: 25%;
  width: 3%;
}

.hand.minute {
  left: 49%;
  top: 10%;
  height: 40%;
  width: 2%;
  z-index: 10;
  cursor: pointer;
}

.hand.second {
  left: 49.5%;
  top: 10%;
  height: 40%;
  width: 1%;
}

.editMode.root {
  outline: 2px solid skyblue;
}

// src/CompositeClock/DigitalView.tsx
import { FC, useCallback, useEffect, useRef } from 'react';
import { useMyOperate, useMySnapshot } from '../MyLib';
import {
  $digitalState,
  changeEditModeText,
  DIGITAL_TEXT_FORMAT,
  enterEditMode,
  exitEditMode,
  getDisplayText,
  isEditModeTextValid,
} from './DigitalState';
import styles from './DigitalView.module.css';
import { $timeState } from './TimeState';

interface Props {
  className?: string;
}

export const DigitalView: FC<Props> = ({ className }) => {
  const operate = useMyOperate();
  const state = useMySnapshot($digitalState);
  const { isEditMode, editModeText } = state;
  const displayText = useMySnapshot($timeState, getDisplayText);

  const refEditor = useRef<HTMLInputElement | null>(null);

  const onDisplayClick = useCallback(() => {
    operate([$digitalState, $timeState], enterEditMode);
  }, [operate]);

  const onEditorBlur = useCallback(() => {
    operate([$digitalState, $timeState], exitEditMode, false);
  }, [operate]);

  const onEditorChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      operate($digitalState, changeEditModeText, e.target.value);
    },
    [operate]
  );

  const onEditorKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === 'Enter') {
        operate([$digitalState, $timeState], exitEditMode);
      }
    },
    [operate]
  );

  useEffect(() => {
    if (isEditMode && refEditor.current) {
      refEditor.current.select();
    }
  }, [isEditMode]);

  return (
    <div className={`${className ?? ''} ${styles.root} ${isEditMode ? styles.editMode : ''}`}>
      {isEditMode ? (
        <>
          <input
            className={styles.editor}
            type="text"
            ref={refEditor}
            value={editModeText}
            onBlur={onEditorBlur}
            onChange={onEditorChange}
            onKeyDown={onEditorKeyDown}
          />
          {!isEditModeTextValid(state) && (
            <div className={styles.invalidHint}>
              The input time doesn't match the expected format which is '{DIGITAL_TEXT_FORMAT}'.
            </div>
          )}
        </>
      ) : (
        <div onClick={onDisplayClick}>{displayText}</div>
      )}
    </div>
  );
};

/* src/CompositeClock/DigitalView.module.css */
.root {
  border: 1px solid black;
  width: 200px;
  line-height: 30px;
  text-align: center;
}

.editor {
  width: 100%;
  text-align: center;
  font-size: inherit;
  padding: 0;
  border: none;
  outline: none;
}

.invalidHint {
  line-height: 1.2;
}

.editMode.root {
  outline: 2px solid skyblue;
}

// src/CompositeClock/CompositeView.tsx
import { FC, useCallback, useEffect, useRef } from 'react';
import { useMyOperate, useMySnapshot, useMyStore } from '../MyLib';
import { $analogueState } from './AnalogueState';
import { AnalogueView } from './AnalogueView';
import styles from './CompositeView.module.css';
import { $digitalState } from './DigitalState';
import { DigitalView } from './DigitalView';
import { $timeState, changeTimestamp } from './TimeState';

export const CompositeView: FC = () => {
  const operate = useMyOperate();
  const store = useMyStore();
  const isEditModeInAnalogueClock = useMySnapshot(
    $analogueState,
    (analogueState) => analogueState.isEditMode
  );
  const isEditModeInDigitalClock = useMySnapshot(
    $digitalState,
    (digitalState) => digitalState.isEditMode
  );

  const calcTimestampCorrection = useCallback(
    () => store.getState($timeState).timestamp - Date.now(),
    [store]
  );

  const refTimeCorrection = useRef<number>(calcTimestampCorrection());

  useEffect(() => {
    if (!isEditModeInAnalogueClock || !isEditModeInDigitalClock) {
      refTimeCorrection.current = calcTimestampCorrection();
    }
  }, [calcTimestampCorrection, isEditModeInAnalogueClock, isEditModeInDigitalClock]);

  useEffect(() => {
    const tickHandler = setInterval(
      () => operate($timeState, changeTimestamp, Date.now() + refTimeCorrection.current),
      100
    );
    return () => clearInterval(tickHandler);
  }, [operate]);

  return (
    <div className={styles.root}>
      <AnalogueView />
      <DigitalView />
    </div>
  );
};

/* src/CompositeClock/CompositeView.module.css */
.root {
  margin: 16px 8px;
  font-size: 16px;
}

After that, store providers are initialized per app for app-wide states and per module for module-wide states:

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import { MyStoreProvider } from './MyLib';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <MyStoreProvider>
      <App />
    </MyStoreProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

// src/CompositeClock/CompositeView.tsx
import { FC, useCallback, useEffect, useRef } from 'react';
-import { useMyOperate, useMySnapshot, useMyStore } from '../MyLib';
+import { MyStoreProvider, useMyOperate, useMySnapshot, useMyStore } from '../MyLib';

...

+export const CompositeClock: FC = () => {
+  return (
+    <MyStoreProvider
+      initialize={(store) => {
+        store.setState($timeState, { timestamp: Date.now() });
+      }}
+    >
+      <CompositeView />
+    </MyStoreProvider>
+  );
+};

Then, the composite clock is exported and used in App.tsx:

// src/CompositeClock/index.ts
export { CompositeClock } from './CompositeView';

import { FC } from 'react';
+import { CompositeClock } from './CompositeClock';

const App: FC = () => {
-  return null;
+  return <CompositeClock />;
};

export default App;

The example module built with MyLib is complete. It can be previewed with the command npm start and its codebase is hosted at review-of-state-management-in-react/05-summary-and-prospect.

In MyLib, both one-state changing logics and multi-state changing logics are defined by reducers. Because each reducer is a pure function that processes one or multi state to return new states of the one or the multi without any side effects, what states a reducer changes can be clearly understood by only reading the reducer's function declaration, which makes both one-state changing and multi-state changing in MyLib predictable without tracking logics in any function bodies. Predictable states changing without tracking logics in any function bodies makes up the brightest pro of MyLib.

Meanwhile, as multi-state changing logics don't have to depend on one-state changing logics, there is no more high coupling between one-state changing and multi-state changing. Also, as all the previously found by-preference cons are resolved by design, no extra cost of development is taken. So, there is no noticeable con.

As a sum-up, doing state management with MyLib achieves predictable states changing without tracking logics in any function bodies and at low overall cost of development. In this way, a better library of state management in React can be designed.

Postscript

By far, the series of articles entitled with 'Review of state management in React: ...' gets finalized. All the today's widely-accepted libraries of state management have been reviewed and a prospect of a better library has been given. The whole codebase of articles and examples is hosted at licg9999/review-of-state-management-in-react. To develop a good React app, doing good state management is necessary. To do good state management, a good solution of state management is necessary. I believe these articles are not either the first ones or the last ones searching for better solutions of state management. But, at lease, I only wish these articles can get us developers one step closer to one of them.

Review of state management in React: kinds of lightweight trials - MobX, Zustand, Jotai and Valtio

Sat, 25 Mar 2023 13:00:00 +0000

After reviewing reducer-like solutions and facebook's experiment, continuing to answer the question #1 in the initial article , How good are today's widely-accepted libraries of state management in React?, I would look into kinds of lightweight trials of state management in React by this article, which includes the direct competitor of Redux - MobX, and some popular rising stars - Zustand, Jotai and Valtio.

As mentioned previously, with the example of the composite clock built with MVC pattern from the initial article as a baseline, for each lightweight trial, I would rebuild the same example module with it and review how good it is in comparison with the baseline.

Lightweight trials
Recalling the example module
Example module built with MobX
Review of state management with MobX
Example module built with Zustand
Review of state management with Zustand
Example module built with Jotai
Review of state management with Jotai
Example module built with Valtio
Review of state management with Valtio
Summary for lightweight trials
What's next

Lightweight trials

By lightweight trials of state management, I mean those solutions that do state management in more straightforward ways unlike Redux family that involves multiple separate parts for state management. Intuitively, a more straightforward solution can result in lower overall cost of development but it may bring trouble in certain cases. Though, it's worth figuring out what the straightforwardness of each widely-accepted lightweight trials would really end up with.

Recalling the example module

Before that, let me recall the requirement of the example module a bit in case a reader might not have time to fully read the previous articles. If the previous articles have been read, this section can be skipped:

Example module built with MobX

Firstly, I would look into MobX. Again, create-react-app is used to initialize the React app. The option --template typescript is used to enable TypeScript:

$ npx create-react-app 04-kinds-of-lightweight-trials-mobx-zustand-jotai-and-valtio/8baa6b2 --template typescript
# ...
$ cd 04-kinds-of-lightweight-trials-mobx-zustand-jotai-and-valtio/8baa6b2

The version of CRA in use is 5.0.1 and the generated directory structure looks as follows:

$ tree -I node_modules
.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   └── setupTests.ts
└── tsconfig.json

2 directories, 19 files

Then, src/App.tsx is cleared for later use:

// 8baa6b2/src/App.tsx
import { FC } from 'react';

const App: FC = () => {
  return null;
};

export default App;

Following files are unused so removed:

$ rm src/App.css src/App.test.tsx src/logo.svg

Also, to help with time parsing and formating, date-fns is installed:

$ npm i date-fns

Then, to use MobX, mobx and mobx-react-lite are installed:

$ npm i mobx mobx-react-lite

The example module, the composite clock, would be all placed in src/CompositeClock. To match the 3 requried states, there would be 3 stores, TimeStore.ts, AnalogueStore.ts and DigitalStore.ts. In MobX, a store hosts properties of a state, the derived data, the methods of states changing as well as the references to other stores.

And for view components, there are AnalogueView.ts for the analogue clock, DigitalView.ts for the digital clock, and CompositeView.ts as a glue. Besides, a React context that provides the stores is needed so stores can be initialized and accessed.

The 3 stores are coded as follows:

// 8baa6b2/src/CompositeClock/TimeStore.ts
import { makeAutoObservable } from 'mobx';

export class TimeStore {
  timestamp: number;

  constructor(timestamp?: number) {
    makeAutoObservable(this);
    this.timestamp = timestamp ?? Date.now();
  }

  changeTimestamp = (timestamp: number): void => {
    this.timestamp = timestamp;
  };
}

// 8baa6b2/src/CompositeClock/AnalogueStore.ts
import { makeAutoObservable } from 'mobx';
import { TimeStore } from './TimeStore';

const TWO_PI = 2 * Math.PI;

export interface AnalogueAngles {
  hour: number;
  minute: number;
  second: number;
}

export class AnalogueStore {
  private timeStore: TimeStore;

  isEditMode: boolean;
  editModeAngles: AnalogueAngles;

  get displayAngles(): AnalogueAngles {
    const d = new Date(this.timeStore.timestamp);
    return {
      hour: ((d.getHours() % 12) / 12) * TWO_PI + (d.getMinutes() / 60) * (TWO_PI / 12),
      minute: (d.getMinutes() / 60) * TWO_PI + (d.getSeconds() / 60) * (TWO_PI / 60),
      second: (d.getSeconds() / 60) * TWO_PI,
    };
  }

  constructor(timeStore: TimeStore) {
    makeAutoObservable(this);
    this.timeStore = timeStore;
    this.isEditMode = false;
    this.editModeAngles = this.displayAngles;
  }

  enterEditMode = (): void => {
    if (this.isEditMode) return;
    this.isEditMode = true;
    this.editModeAngles = this.displayAngles;
  };

  exitEditMode = (submit: boolean = true): void => {
    if (!this.isEditMode) return;
    this.isEditMode = false;
    if (submit) {
      const d = new Date(this.timeStore.timestamp);
      d.setHours(
        Math.floor((this.editModeAngles.hour / TWO_PI) * 12) + 12 * Math.floor(d.getHours() / 12)
      );
      d.setMinutes((this.editModeAngles.minute / TWO_PI) * 60);
      d.setSeconds((this.editModeAngles.second / TWO_PI) * 60);
      this.timeStore.changeTimestamp(d.getTime());
    }
  };

  changeEditModeMinuteAngle = (minuteAngle: number): void => {
    this.editModeAngles.minute = (minuteAngle + TWO_PI) % TWO_PI;
    this.editModeAngles.hour =
      (Math.floor((this.editModeAngles.hour / TWO_PI) * 12) + minuteAngle / TWO_PI) * (TWO_PI / 12);
  };
}

// 8baa6b2/src/CompositeClock/DigitalStore.ts
import { format, isMatch, parse } from 'date-fns';
import { makeAutoObservable } from 'mobx';
import { TimeStore } from './TimeStore';

export class DigitalStore {
  static readonly FORMAT = 'HH:mm:ss';

  private timeStore: TimeStore;

  isEditMode: boolean;
  editModeText: string;

  get displayText(): string {
    return format(this.timeStore.timestamp, DigitalStore.FORMAT);
  }

  get isEditModeTextValid(): boolean {
    return isMatch(this.editModeText, DigitalStore.FORMAT);
  }

  constructor(timeStore: TimeStore) {
    makeAutoObservable(this);
    this.timeStore = timeStore;
    this.isEditMode = false;
    this.editModeText = this.displayText;
  }

  enterEditMode = (): void => {
    if (this.isEditMode) return;
    this.isEditMode = true;
    this.editModeText = this.displayText;
  };

  exitEditMode = (submit: boolean = true): void => {
    if (!this.isEditMode) return;
    this.isEditMode = false;
    if (submit && this.isEditModeTextValid) {
      this.timeStore.changeTimestamp(
        parse(this.editModeText, DigitalStore.FORMAT, this.timeStore.timestamp).getTime()
      );
    }
  };

  changeEditModeText = (editModeText: string): void => {
    this.editModeText = editModeText;
  };
}

Then, the stores context is coded as follows:

// 8baa6b2/src/CompositeClock/StoresContext.tsx
import { createContext, FC, PropsWithChildren, useContext, useMemo } from 'react';
import { AnalogueStore } from './AnalogueStore';
import { DigitalStore } from './DigitalStore';
import { TimeStore } from './TimeStore';

export interface Stores {
  time: TimeStore;
  analogue: AnalogueStore;
  digital: DigitalStore;
}

const StoresContext = createContext<Stores | null>(null);

export const StoresProvider: FC<PropsWithChildren> = ({ children }) => {
  const stores: Stores = useMemo(() => {
    const time = new TimeStore();
    const analogue = new AnalogueStore(time);
    const digital = new DigitalStore(time);
    return { time, analogue, digital };
  }, []);
  return <StoresContext.Provider value={stores}>{children}</StoresContext.Provider>;
};

export function useStores(): Stores {
  const stores = useContext(StoresContext);
  if (!stores) throw new Error('StoresContext not found');
  return stores;
}

And, the view components are coded as follows:

// 8baa6b2/src/CompositeClock/AnalogueView.tsx
import { observer } from 'mobx-react-lite';
import { FC, useCallback, useEffect } from 'react';
import styles from './AnalogueView.module.css';
import { useStores } from './StoresContext';

const TWO_PI = 2 * Math.PI;

interface Props {
  className?: string;
}

export const AnalogueView: FC<Props> = observer(({ className }) => {
  const {
    isEditMode,
    editModeAngles,
    displayAngles,
    enterEditMode,
    exitEditMode,
    changeEditModeMinuteAngle,
  } = useStores().analogue;

  const angles = isEditMode ? editModeAngles : displayAngles;

  const calcEditModeMinuteAngle = useCallback(
    (pointX: number, pointY: number): number => {
      const pointLen = Math.sqrt(Math.pow(pointX, 2) + Math.pow(pointY, 2));

      const normalizedX = pointX / pointLen;
      const normalizedY = pointY / pointLen;

      const oldX = Math.sin(editModeAngles.minute);
      const oldY = Math.cos(editModeAngles.minute);

      const rawMinuteAngle = Math.acos(normalizedY);

      const minuteAngle =
        normalizedY > 0 && oldY > 0
          ? normalizedX >= 0
            ? oldX < 0
              ? rawMinuteAngle + TWO_PI
              : rawMinuteAngle
            : oldX >= 0
            ? -rawMinuteAngle
            : -rawMinuteAngle + TWO_PI
          : normalizedX >= 0
          ? rawMinuteAngle
          : -rawMinuteAngle + TWO_PI;

      return minuteAngle;
    },
    [editModeAngles]
  );

  const onMinuteHandMouseDown = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      e.preventDefault();
      enterEditMode();
    },
    [enterEditMode]
  );

  const onMouseLeave = useCallback(() => exitEditMode(), [exitEditMode]);

  const onMouseUp = useCallback(() => exitEditMode(), [exitEditMode]);

  const onKeyDown = useCallback(
    (e: KeyboardEvent): void => {
      if (isEditMode && e.key === 'Escape') {
        exitEditMode(false);
      }
    },
    [exitEditMode, isEditMode]
  );

  const onMouseMove = useCallback(
    (e: React.MouseEvent<HTMLDivElement>): void => {
      if (!isEditMode) return;

      const boundingBox = e.currentTarget.getBoundingClientRect();
      const originX = boundingBox.x + boundingBox.width / 2;
      const originY = boundingBox.y + boundingBox.height / 2;

      const pointX = e.clientX - originX;
      const pointY = originY - e.clientY;

      changeEditModeMinuteAngle(calcEditModeMinuteAngle(pointX, pointY));
    },
    [calcEditModeMinuteAngle, changeEditModeMinuteAngle, isEditMode]
  );

  useEffect(() => {
    window.addEventListener('keydown', onKeyDown);
    return () => window.removeEventListener('keydown', onKeyDown);
  }, [onKeyDown]);

  return (
    <div
      className={`${className ?? ''} ${styles.root} ${isEditMode ? styles.editMode : ''}`}
      onMouseLeave={onMouseLeave}
      onMouseUp={onMouseUp}
      onMouseMove={onMouseMove}
    >
      <div className={styles.axis} />
      <div
        className={`${styles.hand} ${styles.hour}`}
        style={{ transform: `rotateZ(${angles.hour}rad)` }}
      />
      <div
        className={`${styles.hand} ${styles.minute}`}
        style={{ transform: `rotateZ(${angles.minute}rad)` }}
        onMouseDown={onMinuteHandMouseDown}
      />
      <div
        className={`${styles.hand} ${styles.second}`}
        style={{ transform: `rotateZ(${angles.second}rad)` }}
      />
    </div>
  );
});

/* 8baa6b2/src/CompositeClock/AnalogueView.module.css */
.root {
  margin: 12px;
  padding: 8px;
  width: 160px;
  height: 160px;
  border-radius: 100%;
  border: 1px solid black;
  position: relative;
}

.axis {
  position: absolute;
  background-color: black;
  left: 47.5%;
  top: 47.5%;
  width: 5%;
  height: 5%;
  border-radius: 100%;
}

.hand {
  position: absolute;
  background-color: black;
  transform-origin: bottom center;
}

.hand.hour {
  left: 48.5%;
  top: 25%;
  height: 25%;
  width: 3%;
}

.hand.minute {
  left: 49%;
  top: 10%;
  height: 40%;
  width: 2%;
  z-index: 10;
  cursor: pointer;
}

.hand.second {
  left: 49.5%;
  top: 10%;
  height: 40%;
  width: 1%;
}

.editMode.root {
  outline: 2px solid skyblue;
}

// 8baa6b2/src/CompositeClock/DigitalView.tsx
import { observer } from 'mobx-react-lite';
import { FC, useCallback, useEffect, useRef } from 'react';
import { DigitalStore } from './DigitalStore';
import styles from './DigitalView.module.css';
import { useStores } from './StoresContext';

interface Props {
  className?: string;
}

export const DigitalView: FC<Props> = observer(({ className }) => {
  const {
    isEditMode,
    editModeText,
    displayText,
    isEditModeTextValid,
    enterEditMode,
    exitEditMode,
    changeEditModeText,
  } = useStores().digital;

  const refEditor = useRef<HTMLInputElement | null>(null);

  const onDisplayClick = enterEditMode;

  const onEditorBlur = useCallback(() => exitEditMode(false), [exitEditMode]);

  const onEditorChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => changeEditModeText(e.target.value),
    [changeEditModeText]
  );

  const onEditorKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === 'Enter') {
        exitEditMode();
      }
    },
    [exitEditMode]
  );

  useEffect(() => {
    if (isEditMode && refEditor.current) {
      refEditor.current.select();
    }
  }, [isEditMode]);

  return (
    <div className={`${className ?? ''} ${styles.root} ${isEditMode ? styles.editMode : ''}`}>
      {isEditMode ? (
        <>
          <input
            className={styles.editor}
            type="text"
            ref={refEditor}
            value={editModeText}
            onBlur={onEditorBlur}
            onChange={onEditorChange}
            onKeyDown={onEditorKeyDown}
          />
          {!isEditModeTextValid && (
            <div className={styles.invalidHint}>
              The input time doesn't match the expected format which is '{DigitalStore.FORMAT}'.
            </div>
          )}
        </>
      ) : (
        <div onClick={onDisplayClick}>{displayText}</div>
      )}
    </div>
  );
});

/* 8baa6b2/src/CompositeClock/DigitalView.module.css */
.root {
  border: 1px solid black;
  width: 200px;
  line-height: 30px;
  text-align: center;
}

.editor {
  width: 100%;
  text-align: center;
  font-size: inherit;
  padding: 0;
  border: none;
  outline: none;
}

.invalidHint {
  line-height: 1.2;
}

.editMode.root {
  outline: 2px solid skyblue;
}

// 8baa6b2/src/CompositeClock/CompositeView.tsx
import { observer } from 'mobx-react-lite';
import { FC, useCallback, useEffect, useRef } from 'react';
import { AnalogueView } from './AnalogueView';
import styles from './CompositeView.module.css';
import { DigitalView } from './DigitalView';
import { StoresProvider, useStores } from './StoresContext';

export const CompositeView: FC = observer(() => {
  const {
    time,
    analogue: { isEditMode: isEditModeInAnalogueClock },
    digital: { isEditMode: isEditModeInDigitalClock },
  } = useStores();
  const { changeTimestamp } = time;

  const calcTimestampCorrection = useCallback(() => time.timestamp - Date.now(), [time]);

  const refTimeCorrection = useRef<number>(calcTimestampCorrection());

  useEffect(() => {
    if (!isEditModeInAnalogueClock || !isEditModeInDigitalClock) {
      refTimeCorrection.current = calcTimestampCorrection();
    }
  }, [calcTimestampCorrection, isEditModeInAnalogueClock, isEditModeInDigitalClock]);

  useEffect(() => {
    const tickHandler = setInterval(
      () => changeTimestamp(Date.now() + refTimeCorrection.current),
      100
    );
    return () => clearInterval(tickHandler);
  }, [changeTimestamp]);

  return (
    <div className={styles.root}>
      <AnalogueView />
      <DigitalView />
    </div>
  );
});

export const CompositeClock: FC = () => {
  return (
    <StoresProvider>
      <CompositeView />
    </StoresProvider>
  );
};

/* 8baa6b2/src/CompositeClock/CompositeView.module.css */
.root {
  margin: 16px 8px;
  font-size: 16px;
}

After that, the composite clock is exported and used in App.tsx:

// 8baa6b2/src/CompositeClock/index.ts
export { CompositeClock } from './CompositeView';

// 8baa6b2/src/App.tsx
import { FC } from 'react';
+import { CompositeClock } from './CompositeClock';

const App: FC = () => {
-  return null;
+  return <CompositeClock />;
};

export default App;

The example module built with MobX is complete. It can be previewed with the command npm start and its codebase is hosted at review-of-state-management-in-react/04-kinds-of-lightweight-trials-mobx-zustand-jotai-and-valtio/8baa6b2.

Review of state management with MobX

In MobX, state-changing logics are defined by store methods. To understand what states a store method changes, what store properties the method changes needs to be tracked out by looking into function bodies of the method and other methods invoked by the method. But, unlike tracking state-changing events in MVC pattern, the tracking work in MobX store methods is as easy as tracking plain functions, which makes states changing in MobX predictable at limited cost. It can be perceived by checking how store methods in TimeStore.ts, AnalogueStore.ts and DigitalStore.ts work. Predictable states changing at limited cost of tracking changed store properties in function bodies of store methods makes up the brightest pro of MobX.

Meanwhile, another major pro of MobX is, all the state-managing logics related to one state can be clearly defined in one model, which makes the app domain clearly split.

But, on the other hand, the biggest con of MobX is, as MobX works very independently from React, a strong understanding of MobX's subscription mechanism is needed so to build the stores context and wrap view components with observer correctly, which takes extra cost of development. It can be seen by checking how StoresContext.tsx, AnalogueView.tsx and DigitalView.tsx are constructed.

To sum up, doing state management with MobX achieves predictable states changing at limited cost of tracking state-changing logics as well as at extra cost of correctly using the subscription mechanism.

Example module built with Zustand

Next, I would take a look at Zustand. Again, the React app is initialized with create-react-app --template typescript, src/App.tsx is cleared for later use, unused files are removed, the package of time helpers is installed:

$ npx create-react-app 04-kinds-of-lightweight-trials-mobx-zustand-jotai-and-valtio/61afc7d --template typescript
# ...
$ cd 04-kinds-of-lightweight-trials-mobx-zustand-jotai-and-valtio/61afc7d

// 61afc7d/src/App.tsx
import { FC } from 'react';

const App: FC = () => {
  return null;
};

export default App;

$ rm src/App.css src/App.test.tsx src/logo.svg

$ npm i date-fns

Then, to use Zustand, zustand is installed:

$ npm i zustand

Similarly, the composite clock would be all placed in src/CompositeClock. To match the 3 requried states, there would be 3 stores, TimeStore.ts, AnalogueStore.ts and DigitalStore.ts. In Zustand, a store hosts a state and one-state changing functions to the state. For multi-state changing, hooks using one-state changing functions provided from stores are built. For data deriving, getters on states are built.

And for view components, there are AnalogueView.ts for the analogue clock, DigitalView.ts for the digital clock, and CompositeView.ts as a glue. One tip is, for initial states assigning, it needs to be made using React contexts following the official guide.

Then, the store for the state of time is coded as follows:

// 61afc7d/src/CompositeClock/TimeStore.tsx
import { createContext, FC, PropsWithChildren, useContext, useRef } from 'react';
import { createStore, useStore } from 'zustand';

export interface TimeState {
  timestamp: number;
}

export interface TimeActions {
  getTimestamp(): number;
  changeTimestamp(timestamp: number): void;
}

function createTimeStore(initialState: Partial<TimeState> = {}) {
  return createStore<TimeState & TimeActions>((set, get) => ({
    timestamp: 0,
    ...initialState,

    getTimestamp() {
      return get().timestamp;
    },

    changeTimestamp(timestamp) {
      set({ timestamp });
    },
  }));
}

const TimeStoreContext = createContext<ReturnType<typeof createTimeStore> | null>(null);

export const TimeStoreProvider: FC<PropsWithChildren & Partial<TimeState>> = ({
  children,
  ...initialState
}) => {
  const refTimeStore = useRef<ReturnType<typeof createTimeStore>>();
  if (!refTimeStore.current) {
    refTimeStore.current = createTimeStore(initialState);
  }
  return (
    <TimeStoreContext.Provider value={refTimeStore.current}>{children}</TimeStoreContext.Provider>
  );
};

export function useTimeStore(): TimeState & TimeActions;
export function useTimeStore<T>(selector: (state: TimeState & TimeActions) => T): T;
export function useTimeStore<T>(
  selector?: (state: TimeState & TimeActions) => T
): (TimeState & TimeActions) | T {
  const timeStore = useContext(TimeStoreContext);
  if (!timeStore) throw new Error('TimeStoreContext not found');
  return useStore(timeStore, (state) => (selector ? selector(state) : state));
}

And, the stores for the states of the analogue clock and the digital clock are coded as follows:

// 61afc7d/src/CompositeClock/AnalogueStore.ts
import { useCallback } from 'react';
import { create } from 'zustand';
import { TimeState, useTimeStore } from './TimeStore';

const TWO_PI = 2 * Math.PI;

export interface AnalogueAngles {
  hour: number;
  minute: number;
  second: number;
}

export interface AnalogueState {
  isEditMode: boolean;
  editModeAngles: AnalogueAngles;
}

export interface AnalogueBasicActions {
  _enterEditMode(editModeAngles: AnalogueAngles): void;
  _exitEditMode(): void;
  changeEditModeMinuteAngle(minuteAngle: number): void;
}

export const useAnalogueStore = create<AnalogueState & AnalogueBasicActions>((set, get) => ({
  isEditMode: false,
  editModeAngles: { hour: 0, minute: 0, second: 0 },

  _enterEditMode(editModeAngles) {
    set({ isEditMode: true, editModeAngles });
  },

  _exitEditMode() {
    set({ isEditMode: false });
  },

  changeEditModeMinuteAngle(minuteAngle) {
    const { editModeAngles } = get();
    set({
      editModeAngles: {
        ...editModeAngles,
        minute: (minuteAngle + TWO_PI) % TWO_PI,
        hour:
          (Math.floor((editModeAngles.hour / TWO_PI) * 12) + minuteAngle / TWO_PI) * (TWO_PI / 12),
      },
    });
  },
}));

export function useEnterEditMode(): () => void {
  const state = useAnalogueStore();
  const timeState = useTimeStore();

  return useCallback(() => {
    const { isEditMode, _enterEditMode } = state;
    const displayAngles = getDisplayAngles(timeState);
    if (isEditMode) return;
    _enterEditMode(displayAngles);
  }, [state, timeState]);
}

export function useExitEditMode(): (submit?: boolean) => void {
  const state = useAnalogueStore();
  const timeState = useTimeStore();

  return useCallback(
    (submit = true) => {
      const { isEditMode, editModeAngles, _exitEditMode } = state;
      const { timestamp, changeTimestamp } = timeState;
      if (!isEditMode) return;
      if (submit) {
        const d = new Date(timestamp);
        d.setHours(
          Math.floor((editModeAngles.hour / TWO_PI) * 12) + 12 * Math.floor(d.getHours() / 12)
        );
        d.setMinutes((editModeAngles.minute / TWO_PI) * 60);
        d.setSeconds((editModeAngles.second / TWO_PI) * 60);
        changeTimestamp(d.getTime());
      }
      _exitEditMode();
    },
    [state, timeState]
  );
}

export function getDisplayAngles(timeState: TimeState): AnalogueAngles {
  const d = new Date(timeState.timestamp);
  return {
    hour: ((d.getHours() % 12) / 12) * TWO_PI + (d.getMinutes() / 60) * (TWO_PI / 12),
    minute: (d.getMinutes() / 60) * TWO_PI + (d.getSeconds() / 60) * (TWO_PI / 60),
    second: (d.getSeconds() / 60) * TWO_PI,
  };
}

// 61afc7d/src/CompositeClock/DigitalStore.ts
import { format, isMatch, parse } from 'date-fns';
import { useCallback } from 'react';
import { create } from 'zustand';
import { TimeState, useTimeStore } from './TimeStore';

export interface DigitalState {
  isEditMode: boolean;
  editModeText: string;
}

export interface DigitalBasicActions {
  _enterEditMode(editModeText: string): void;
  _exitEditMode(): void;
  changeEditModeText(editModeText: string): void;
}

export const DIGITAL_TEXT_FORMAT = 'HH:mm:ss';

export const useDigitalStore = create<DigitalState & DigitalBasicActions>((set) => ({
  isEditMode: false,
  editModeText: '',

  _enterEditMode(editModeText) {
    set({ isEditMode: true, editModeText });
  },

  _exitEditMode() {
    set({ isEditMode: false });
  },

  changeEditModeText(editModeText) {
    set({ editModeText });
  },
}));

export function useEnterEditMode(): () => void {
  const state = useDigitalStore();
  const timeState = useTimeStore();

  return useCallback(() => {
    const { isEditMode, _enterEditMode } = state;
    if (isEditMode) return;
    _enterEditMode(getDisplayText(timeState));
  }, [state, timeState]);
}

export function useExitEditMode(): (submit?: boolean) => void {
  const state = useDigitalStore();
  const timeState = useTimeStore();

  return useCallback(
    (submit = true) => {
      const { isEditMode, editModeText, _exitEditMode } = state;
      const { timestamp, changeTimestamp } = timeState;
      if (!isEditMode) return;
      if (submit && isEditModeTextValid(state)) {
        changeTimestamp(parse(editModeText, DIGITAL_TEXT_FORMAT, timestamp).getTime());
      }
      _exitEditMode();
    },
    [state, timeState]
  );
}

export function isEditModeTextValid(state: DigitalState): boolean {
  return isMatch(state.editModeText, DIGITAL_TEXT_FORMAT);
}

export function getDisplayText(timeState: TimeState): string {
  return format(timeState.timestamp, DIGITAL_TEXT_FORMAT);
}

Then, the view components are coded as follows:

// 61afc7d/src/CompositeClock/AnalogueView.tsx
import { FC, useCallback, useEffect } from 'react';
import {
  getDisplayAngles,
  useAnalogueStore,
  useEnterEditMode,
  useExitEditMode,
} from './AnalogueStore';
import styles from './AnalogueView.module.css';
import { useTimeStore } from './TimeStore';

const TWO_PI = 2 * Math.PI;

interface Props {
  className?: string;
}

export const AnalogueView: FC<Props> = ({ className }) => {
  const state = useAnalogueStore();
  const { isEditMode, editModeAngles, changeEditModeMinuteAngle } = state;
  const displayAngles = useTimeStore(getDisplayAngles);

  const enterEditMode = useEnterEditMode();
  const exitEditMode = useExitEditMode();

  const angles = isEditMode ? editModeAngles : displayAngles;

  const calcEditModeMinuteAngle = useCallback(
    (pointX: number, pointY: number): number => {
      const pointLen = Math.sqrt(Math.pow(pointX, 2) + Math.pow(pointY, 2));

      const normalizedX = pointX / pointLen;
      const normalizedY = pointY / pointLen;

      const oldX = Math.sin(editModeAngles.minute);
      const oldY = Math.cos(editModeAngles.minute);

      const rawMinuteAngle = Math.acos(normalizedY);

      const minuteAngle =
        normalizedY > 0 && oldY > 0
          ? normalizedX >= 0
            ? oldX < 0
              ? rawMinuteAngle + TWO_PI
              : rawMinuteAngle
            : oldX >= 0
            ? -rawMinuteAngle
            : -rawMinuteAngle + TWO_PI
          : normalizedX >= 0
          ? rawMinuteAngle
          : -rawMinuteAngle + TWO_PI;

      return minuteAngle;
    },
    [editModeAngles]
  );

  const onMinuteHandMouseDown = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      e.preventDefault();
      enterEditMode();
    },
    [enterEditMode]
  );

  const onMouseLeave = useCallback(() => exitEditMode(), [exitEditMode]);

  const onMouseUp = useCallback(() => exitEditMode(), [exitEditMode]);

  const onKeyDown = useCallback(
    (e: KeyboardEvent): void => {
      if (isEditMode && e.key === 'Escape') {
        exitEditMode(false);
      }
    },
    [exitEditMode, isEditMode]
  );

  const onMouseMove = useCallback(
    (e: React.MouseEvent<HTMLDivElement>): void => {
      if (!isEditMode) return;

      const boundingBox = e.currentTarget.getBoundingClientRect();
      const originX = boundingBox.x + boundingBox.width / 2;
      const originY = boundingBox.y + boundingBox.height / 2;

      const pointX = e.clientX - originX;
      const pointY = originY - e.clientY;

      changeEditModeMinuteAngle(calcEditModeMinuteAngle(pointX, pointY));
    },
    [calcEditModeMinuteAngle, changeEditModeMinuteAngle, isEditMode]
  );

  useEffect(() => {
    window.addEventListener('keydown', onKeyDown);
    return () => window.removeEventListener('keydown', onKeyDown);
  }, [onKeyDown]);

  return (
    <div
      className={`${className ?? ''} ${styles.root} ${isEditMode ? styles.editMode : ''}`}
      onMouseLeave={onMouseLeave}
      onMouseUp={onMouseUp}
      onMouseMove={onMouseMove}
    >
      <div className={styles.axis} />
      <div
        className={`${styles.hand} ${styles.hour}`}
        style={{ transform: `rotateZ(${angles.hour}rad)` }}
      />
      <div
        className={`${styles.hand} ${styles.minute}`}
        style={{ transform: `rotateZ(${angles.minute}rad)` }}
        onMouseDown={onMinuteHandMouseDown}
      />
      <div
        className={`${styles.hand} ${styles.second}`}
        style={{ transform: `rotateZ(${angles.second}rad)` }}
      />
    </div>
  );
};

/* 61afc7d/src/CompositeClock/AnalogueView.module.css */
.root {
  margin: 12px;
  padding: 8px;
  width: 160px;
  height: 160px;
  border-radius: 100%;
  border: 1px solid black;
  position: relative;
}

.axis {
  position: absolute;
  background-color: black;
  left: 47.5%;
  top: 47.5%;
  width: 5%;
  height: 5%;
  border-radius: 100%;
}

.hand {
  position: absolute;
  background-color: black;
  transform-origin: bottom center;
}

.hand.hour {
  left: 48.5%;
  top: 25%;
  height: 25%;
  width: 3%;
}

.hand.minute {
  left: 49%;
  top: 10%;
  height: 40%;
  width: 2%;
  z-index: 10;
  cursor: pointer;
}

.hand.second {
  left: 49.5%;
  top: 10%;
  height: 40%;
  width: 1%;
}

.editMode.root {
  outline: 2px solid skyblue;
}

// 61afc7d/src/CompositeClock/DigitalView.tsx
import { FC, useCallback, useEffect, useRef } from 'react';
import {
  DIGITAL_TEXT_FORMAT,
  getDisplayText,
  isEditModeTextValid,
  useDigitalStore,
  useEnterEditMode,
  useExitEditMode,
} from './DigitalStore';
import styles from './DigitalView.module.css';
import { useTimeStore } from './TimeStore';

interface Props {
  className?: string;
}

export const DigitalView: FC<Props> = ({ className }) => {
  const state = useDigitalStore();
  const { isEditMode, editModeText, changeEditModeText } = state;
  const displayText = useTimeStore(getDisplayText);

  const enterEditMode = useEnterEditMode();
  const exitEditMode = useExitEditMode();

  const refEditor = useRef<HTMLInputElement | null>(null);

  const onDisplayClick = enterEditMode;

  const onEditorBlur = useCallback(() => exitEditMode(false), [exitEditMode]);

  const onEditorChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => changeEditModeText(e.target.value),
    [changeEditModeText]
  );

  const onEditorKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === 'Enter') {
        exitEditMode();
      }
    },
    [exitEditMode]
  );

  useEffect(() => {
    if (isEditMode && refEditor.current) {
      refEditor.current.select();
    }
  }, [isEditMode]);

  return (
    <div className={`${className ?? ''} ${styles.root} ${isEditMode ? styles.editMode : ''}`}>
      {isEditMode ? (
        <>
          <input
            className={styles.editor}
            type="text"
            ref={refEditor}
            value={editModeText}
            onBlur={onEditorBlur}
            onChange={onEditorChange}
            onKeyDown={onEditorKeyDown}
          />
          {!isEditModeTextValid(state) && (
            <div className={styles.invalidHint}>
              The input time doesn't match the expected format which is '{DIGITAL_TEXT_FORMAT}'.
            </div>
          )}
        </>
      ) : (
        <div onClick={onDisplayClick}>{displayText}</div>
      )}
    </div>
  );
};

/* 61afc7d/src/CompositeClock/DigitalView.module.css */
.root {
  border: 1px solid black;
  width: 200px;
  line-height: 30px;
  text-align: center;
}

.editor {
  width: 100%;
  text-align: center;
  font-size: inherit;
  padding: 0;
  border: none;
  outline: none;
}

.invalidHint {
  line-height: 1.2;
}

.editMode.root {
  outline: 2px solid skyblue;
}

// 61afc7d/src/CompositeClock/CompositeView.tsx
import { FC, useCallback, useEffect, useRef } from 'react';
import { useAnalogueStore } from './AnalogueStore';
import { AnalogueView } from './AnalogueView';
import styles from './CompositeView.module.css';
import { useDigitalStore } from './DigitalStore';
import { DigitalView } from './DigitalView';
import { TimeStoreProvider, useTimeStore } from './TimeStore';

export const CompositeView: FC = () => {
  const { getTimestamp, changeTimestamp } = useTimeStore(({ getTimestamp, changeTimestamp }) => ({
    getTimestamp,
    changeTimestamp,
  }));
  const isEditModeInAnalogueClock = useAnalogueStore(({ isEditMode }) => isEditMode);
  const isEditModeInDigitalClock = useDigitalStore(({ isEditMode }) => isEditMode);

  const calcTimestampCorrection = useCallback(() => getTimestamp() - Date.now(), [getTimestamp]);

  const refTimeCorrection = useRef<number>(calcTimestampCorrection());

  useEffect(() => {
    if (!isEditModeInAnalogueClock || !isEditModeInDigitalClock) {
      refTimeCorrection.current = calcTimestampCorrection();
    }
  }, [calcTimestampCorrection, isEditModeInAnalogueClock, isEditModeInDigitalClock]);

  useEffect(() => {
    const tickHandler = setInterval(
      () => changeTimestamp(Date.now() + refTimeCorrection.current),
      100
    );
    return () => clearInterval(tickHandler);
  }, [changeTimestamp]);

  return (
    <div className={styles.root}>
      <AnalogueView />
      <DigitalView />
    </div>
  );
};

export const CompositeClock: FC = () => {
  return (
    <TimeStoreProvider timestamp={Date.now()}>
      <CompositeView />
    </TimeStoreProvider>
  );
};

/* 61afc7d/src/CompositeClock/CompositeView.module.css */
.root {
  margin: 16px 8px;
  font-size: 16px;
}

After that, the composite clock is exported and used in App.tsx:

// 61afc7d/src/CompositeClock/index.ts
export { CompositeClock } from './CompositeView';

// 61afc7d/src/App.tsx
import { FC } from 'react';
+import { CompositeClock } from './CompositeClock';

const App: FC = () => {
-  return null;
+  return <CompositeClock />;
};

export default App;

The example module built with Zustand is complete. Its codebase is hosted at review-of-state-management-in-react/04-kinds-of-lightweight-trials-mobx-zustand-jotai-and-valtio/61afc7d.

Review of state management with Zustand

In Zustand, one-state changing logics are defined by store functions. As a store function is restricted to changing the one state represented by the store, what one state a store function changes can be clearly understood by only checking what one state the store represents, which makes one-state changing in Zustand predictable without tracking logics in any function bodies. Meanwhile, multi-state changing logics are defined by multi-state changing hooks. Though, to understand what states a multi-state changing hook changes, what store functions the hook invokes needs to be tracked out by looking into function bodies of the hook and other hooks invoked by the hook. But, unlike tracking state-changing events in MVC pattern, the tracking work in Zustand multi-state changing hooks is as easy as tracking plain functions, which makes multi-state changing in Zustand predictable at limited cost. It can be perceived by checking how TimeStore.ts, AnalogueStore.ts and DigitalStore.ts work. Predictable one-state changing at no cost of tracking logics in any function bodies and predictable multi-state changing at limited cost of tracking invoked store functions in function bodies of multi-state changing hooks make up the brightest pro of Zustand.

But, on the other hand, because building and maintaining multi-state changing hooks always involve building and maintaining underlying one-state changing store function, multi-state changing hooks and their underlying stores become high-coupling, which brings difficulties in development, thus overall cost of development becomes high. High coupling between stores and their multi-state changing hooks leads to the biggest con of Zustand.

Besides, a module built with Zustand is actually not completely modularized by default, because when a module gets initialized for multiple instances, these instances are sharing exactly the same states in the app-wide states. To resolve this issue, a stores context that hosts module-wide states needs to be introduced per module, which is costly in Zustand. Incomplete modularization by default is another major con of Zustand.

Besides, a minor con of Zustand is, no strong support is provided for data deriving and initial states assigning, so extra cost of development is needed.

A worth-mentioning tip is, as a store can provide latest-state-accessing function using the get calls, latest states can be accessed in state-changing hooks immediately after a store function is invoked, thus any kinds of state-changing logics can be coded.

To sum up, doing state management with Zustand achieves predictable states changing at limited cost of only tracking multi-state changing logics but at a bit high overall cost of development. Further more, if comparing Zustand with Redux Toolkit(RTK), it's not hard to find that Zustand stores are pretty much like RTK slices, which makes Zustand pretty much like a lightweight verson of RTK.

Example module built with Jotai

Next, let me check out Jotai. Again, the React app is initialized with create-react-app --template typescript, src/App.tsx is cleared for later use, unused files are removed, the package of time helpers is installed:

$ npx create-react-app 04-kinds-of-lightweight-trials-mobx-zustand-jotai-and-valtio/d6f8289 --template typescript
# ...
$ cd 04-kinds-of-lightweight-trials-mobx-zustand-jotai-and-valtio/d6f8289

// d6f8289/src/App.tsx
import { FC } from 'react';

const App: FC = () => {
  return null;
};

export default App;

$ rm src/App.css src/App.test.tsx src/logo.svg

$ npm i date-fns

Then, to use Jotai, jotai is installed:

$ npm i jotai

Again, the composite clock would be all placed in src/CompositeClock. To match the 3 requried states, there would be 3 groups of atoms and state-changing hooks placed seperately in TimeAtom.ts, AnalogueAtom.ts and DigitalAtom.ts. In Jotai, an atom represents a state or a derived datum, and a state-changing hook is built by using state setting calls to an atom.

And for view components, there are AnalogueView.ts for the analogue clock, DigitalView.ts for the digital clock, and CompositeView.ts as a glue. Besides, Jotai providers need to be initialized but doing it costs little.

The 3 groups of atom states and state-changing hooks are coded as follows:

// d6f8289/src/CompositeClock/TimeAtom.ts
import { atom, useSetAtom } from 'jotai';
import { useCallback } from 'react';

export interface TimeState {
  timestamp: number;
}

export const timeAtom = atom<TimeState>({
  timestamp: 0,
});

export function useChangeTimestamp(): (timestamp: number) => void {
  const setTime = useSetAtom(timeAtom);
  return useCallback(
    (timestamp) => {
      setTime((state) => ({ ...state, timestamp }));
    },
    [setTime]
  );
}

// d6f8289/src/CompositeClock/AnalogueAtom.ts
import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
import { useCallback } from 'react';
import { timeAtom, useChangeTimestamp } from './TimeAtom';

const TWO_PI = 2 * Math.PI;

export interface AnalogueAngles {
  hour: number;
  minute: number;
  second: number;
}

export interface AnalogueState {
  isEditMode: boolean;
  editModeAngles: AnalogueAngles;
}

export const analogueAtom = atom<AnalogueState>({
  isEditMode: false,
  editModeAngles: { hour: 0, minute: 0, second: 0 },
});

export const displayAnglesAtom = atom<AnalogueAngles>((get) => {
  const d = new Date(get(timeAtom).timestamp);
  return {
    hour: ((d.getHours() % 12) / 12) * TWO_PI + (d.getMinutes() / 60) * (TWO_PI / 12),
    minute: (d.getMinutes() / 60) * TWO_PI + (d.getSeconds() / 60) * (TWO_PI / 60),
    second: (d.getSeconds() / 60) * TWO_PI,
  };
});

export function useEnterEditMode(): () => void {
  const [analogue, setAnalogue] = useAtom(analogueAtom);
  const displayAngles = useAtomValue(displayAnglesAtom);

  return useCallback(() => {
    if (analogue.isEditMode) return;
    setAnalogue((state) => ({ ...state, isEditMode: true, editModeAngles: displayAngles }));
  }, [analogue, displayAngles, setAnalogue]);
}

export function useExitEditMode(): (submit?: boolean) => void {
  const [analogue, setAnalogue] = useAtom(analogueAtom);
  const time = useAtomValue(timeAtom);
  const changeTimestamp = useChangeTimestamp();

  return useCallback(
    (submit = true) => {
      if (!analogue.isEditMode) return;
      if (submit) {
        const d = new Date(time.timestamp);
        d.setHours(
          Math.floor((analogue.editModeAngles.hour / TWO_PI) * 12) +
            12 * Math.floor(d.getHours() / 12)
        );
        d.setMinutes((analogue.editModeAngles.minute / TWO_PI) * 60);
        d.setSeconds((analogue.editModeAngles.second / TWO_PI) * 60);
        changeTimestamp(d.getTime());
      }
      setAnalogue((state) => ({ ...state, isEditMode: false }));
    },
    [analogue, changeTimestamp, setAnalogue, time]
  );
}

export function useChangeEditModeMinuteAngle(): (minuteAngle: number) => void {
  const setAnalogue = useSetAtom(analogueAtom);

  return useCallback(
    (minuteAngle) => {
      setAnalogue((state) => ({
        ...state,
        editModeAngles: {
          ...state.editModeAngles,
          minute: (minuteAngle + TWO_PI) % TWO_PI,
          hour:
            (Math.floor((state.editModeAngles.hour / TWO_PI) * 12) + minuteAngle / TWO_PI) *
            (TWO_PI / 12),
        },
      }));
    },
    [setAnalogue]
  );
}

// d6f8289/src/CompositeClock/DigitalAtom.ts
import { format, isMatch, parse } from 'date-fns';
import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
import { useCallback } from 'react';
import { timeAtom, useChangeTimestamp } from './TimeAtom';

export interface DigitalState {
  isEditMode: boolean;
  editModeText: string;
}

export const DIGITAL_TEXT_FORMAT = 'HH:mm:ss';

export const digitalAtom = atom<DigitalState>({
  isEditMode: false,
  editModeText: '',
});

export const displayTextAtom = atom<string>((get) =>
  format(get(timeAtom).timestamp, DIGITAL_TEXT_FORMAT)
);

export const isEditModeTextValidAtom = atom<boolean>((get) =>
  isMatch(get(digitalAtom).editModeText, DIGITAL_TEXT_FORMAT)
);

export function useEnterEditMode(): () => void {
  const [digital, setDigital] = useAtom(digitalAtom);
  const displayText = useAtomValue(displayTextAtom);

  return useCallback(() => {
    if (digital.isEditMode) return;
    setDigital((state) => ({ ...state, isEditMode: true, editModeText: displayText }));
  }, [digital, displayText, setDigital]);
}

export function useExitEditMode(): (submit?: boolean) => void {
  const [digital, setDigital] = useAtom(digitalAtom);
  const isEditModeTextValid = useAtom(isEditModeTextValidAtom);
  const time = useAtomValue(timeAtom);
  const changeTimestamp = useChangeTimestamp();

  return useCallback(
    (submit = true) => {
      if (!digital.isEditMode) return;
      if (submit && isEditModeTextValid) {
        changeTimestamp(parse(digital.editModeText, DIGITAL_TEXT_FORMAT, time.timestamp).getTime());
      }
      setDigital((state) => ({ ...state, isEditMode: false }));
    },
    [changeTimestamp, digital, isEditModeTextValid, setDigital, time]
  );
}

export function useChangeEditModeText(): (editModeText: string) => void {
  const setDigital = useSetAtom(digitalAtom);

  return useCallback(
    (editModeText) => {
      setDigital((state) => ({ ...state, editModeText }));
    },
    [setDigital]
  );
}

And, the view components are coded as follows:

// d6f8289/src/CompositeClock/AnalogueView.tsx
import { useAtomValue } from 'jotai';
import { FC, useCallback, useEffect } from 'react';
import {
  analogueAtom,
  displayAnglesAtom,
  useChangeEditModeMinuteAngle,
  useEnterEditMode,
  useExitEditMode,
} from './AnalogueAtom';
import styles from './AnalogueView.module.css';

const TWO_PI = 2 * Math.PI;

interface Props {
  className?: string;
}

export const AnalogueView: FC<Props> = ({ className }) => {
  const { isEditMode, editModeAngles } = useAtomValue(analogueAtom);
  const displayAngles = useAtomValue(displayAnglesAtom);

  const enterEditMode = useEnterEditMode();
  const exitEditMode = useExitEditMode();
  const changeEditModeMinuteAngle = useChangeEditModeMinuteAngle();

  const angles = isEditMode ? editModeAngles : displayAngles;

  const calcEditModeMinuteAngle = useCallback(
    (pointX: number, pointY: number): number => {
      const pointLen = Math.sqrt(Math.pow(pointX, 2) + Math.pow(pointY, 2));

      const normalizedX = pointX / pointLen;
      const normalizedY = pointY / pointLen;

      const oldX = Math.sin(editModeAngles.minute);
      const oldY = Math.cos(editModeAngles.minute);

      const rawMinuteAngle = Math.acos(normalizedY);

      const minuteAngle =
        normalizedY > 0 && oldY > 0
          ? normalizedX >= 0
            ? oldX < 0
              ? rawMinuteAngle + TWO_PI
              : rawMinuteAngle
            : oldX >= 0
            ? -rawMinuteAngle
            : -rawMinuteAngle + TWO_PI
          : normalizedX >= 0
          ? rawMinuteAngle
          : -rawMinuteAngle + TWO_PI;

      return minuteAngle;
    },
    [editModeAngles]
  );

  const onMinuteHandMouseDown = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      e.preventDefault();
      enterEditMode();
    },
    [enterEditMode]
  );

  const onMouseLeave = useCallback(() => exitEditMode(), [exitEditMode]);

  const onMouseUp = useCallback(() => exitEditMode(), [exitEditMode]);

  const onKeyDown = useCallback(
    (e: KeyboardEvent): void => {
      if (isEditMode && e.key === 'Escape') {
        exitEditMode(false);
      }
    },
    [isEditMode, exitEditMode]
  );

  const onMouseMove = useCallback(
    (e: React.MouseEvent<HTMLDivElement>): void => {
      if (!isEditMode) return;

      const boundingBox = e.currentTarget.getBoundingClientRect();
      const originX = boundingBox.x + boundingBox.width / 2;
      const originY = boundingBox.y + boundingBox.height / 2;

      const pointX = e.clientX - originX;
      const pointY = originY - e.clientY;

      changeEditModeMinuteAngle(calcEditModeMinuteAngle(pointX, pointY));
    },
    [calcEditModeMinuteAngle, changeEditModeMinuteAngle, isEditMode]
  );

  useEffect(() => {
    window.addEventListener('keydown', onKeyDown);
    return () => window.removeEventListener('keydown', onKeyDown);
  }, [onKeyDown]);

  return (
    <div
      className={`${className ?? ''} ${styles.root} ${isEditMode ? styles.editMode : ''}`}
      onMouseLeave={onMouseLeave}
      onMouseUp={onMouseUp}
      onMouseMove={onMouseMove}
    >
      <div className={styles.axis} />
      <div
        className={`${styles.hand} ${styles.hour}`}
        style={{ transform: `rotateZ(${angles.hour}rad)` }}
      />
      <div
        className={`${styles.hand} ${styles.minute}`}
        style={{ transform: `rotateZ(${angles.minute}rad)` }}
        onMouseDown={onMinuteHandMouseDown}
      />
      <div
        className={`${styles.hand} ${styles.second}`}
        style={{ transform: `rotateZ(${angles.second}rad)` }}
      />
    </div>
  );
};

/* d6f8289/src/CompositeClock/AnalogueView.module.css */
.root {
  margin: 12px;
  padding: 8px;
  width: 160px;
  height: 160px;
  border-radius: 100%;
  border: 1px solid black;
  position: relative;
}

.axis {
  position: absolute;
  background-color: black;
  left: 47.5%;
  top: 47.5%;
  width: 5%;
  height: 5%;
  border-radius: 100%;
}

.hand {
  position: absolute;
  background-color: black;
  transform-origin: bottom center;
}

.hand.hour {
  left: 48.5%;
  top: 25%;
  height: 25%;
  width: 3%;
}

.hand.minute {
  left: 49%;
  top: 10%;
  height: 40%;
  width: 2%;
  z-index: 10;
  cursor: pointer;
}

.hand.second {
  left: 49.5%;
  top: 10%;
  height: 40%;
  width: 1%;
}

.editMode.root {
  outline: 2px solid skyblue;
}

// d6f8289/src/CompositeClock/DigitalView.tsx
import { useAtomValue } from 'jotai';
import { FC, useCallback, useEffect, useRef } from 'react';
import {
  digitalAtom,
  DIGITAL_TEXT_FORMAT,
  displayTextAtom,
  isEditModeTextValidAtom,
  useChangeEditModeText,
  useEnterEditMode,
  useExitEditMode,
} from './DigitalAtom';
import styles from './DigitalView.module.css';

interface Props {
  className?: string;
}

export const DigitalView: FC<Props> = ({ className }) => {
  const { isEditMode, editModeText } = useAtomValue(digitalAtom);
  const displayText = useAtomValue(displayTextAtom);
  const isEditModeTextValid = useAtomValue(isEditModeTextValidAtom);

  const enterEditMode = useEnterEditMode();
  const exitEditMode = useExitEditMode();
  const changeEditModeText = useChangeEditModeText();

  const refEditor = useRef<HTMLInputElement | null>(null);

  const onDisplayClick = enterEditMode;

  const onEditorBlur = useCallback(() => exitEditMode(false), [exitEditMode]);

  const onEditorChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => changeEditModeText(e.target.value),
    [changeEditModeText]
  );

  const onEditorKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === 'Enter') {
        exitEditMode();
      }
    },
    [exitEditMode]
  );

  useEffect(() => {
    if (isEditMode && refEditor.current) {
      refEditor.current.select();
    }
  }, [isEditMode]);

  return (
    <div className={`${className ?? ''} ${styles.root} ${isEditMode ? styles.editMode : ''}`}>
      {isEditMode ? (
        <>
          <input
            className={styles.editor}
            type="text"
            ref={refEditor}
            value={editModeText}
            onBlur={onEditorBlur}
            onChange={onEditorChange}
            onKeyDown={onEditorKeyDown}
          />
          {!isEditModeTextValid && (
            <div className={styles.invalidHint}>
              The input time doesn't match the expected format which is '{DIGITAL_TEXT_FORMAT}'.
            </div>
          )}
        </>
      ) : (
        <div onClick={onDisplayClick}>{displayText}</div>
      )}
    </div>
  );
};

/* d6f8289/src/CompositeClock/DigitalView.module.css */
.root {
  border: 1px solid black;
  width: 200px;
  line-height: 30px;
  text-align: center;
}

.editor {
  width: 100%;
  text-align: center;
  font-size: inherit;
  padding: 0;
  border: none;
  outline: none;
}

.invalidHint {
  line-height: 1.2;
}

.editMode.root {
  outline: 2px solid skyblue;
}

// d6f8289/src/CompositeClock/CompositeView.tsx
import { useAtomValue, useStore } from 'jotai';
import { useHydrateAtoms } from 'jotai/utils';
import { FC, useCallback, useEffect, useRef } from 'react';
import { analogueAtom } from './AnalogueAtom';
import { AnalogueView } from './AnalogueView';
import styles from './CompositeView.module.css';
import { digitalAtom } from './DigitalAtom';
import { DigitalView } from './DigitalView';
import { timeAtom, useChangeTimestamp } from './TimeAtom';

export const CompositeView: FC = () => {
  useHydrateAtoms([[timeAtom, { timestamp: Date.now() }] as const]);

  const store = useStore();
  const { isEditMode: isEditModeInAnalogueClock } = useAtomValue(analogueAtom);
  const { isEditMode: isEditModeInDigitalClock } = useAtomValue(digitalAtom);

  const changeTimestamp = useChangeTimestamp();

  const calcTimestampCorrection = useCallback(() => {
    return store.get(timeAtom).timestamp - Date.now();
  }, [store]);

  const refTimeCorrection = useRef<number>(calcTimestampCorrection());

  useEffect(() => {
    if (!isEditModeInAnalogueClock || !isEditModeInDigitalClock) {
      refTimeCorrection.current = calcTimestampCorrection();
    }
  }, [calcTimestampCorrection, isEditModeInAnalogueClock, isEditModeInDigitalClock]);

  useEffect(() => {
    const tickHandler = setInterval(
      () => changeTimestamp(Date.now() + refTimeCorrection.current),
      100
    );
    return () => clearInterval(tickHandler);
  }, [changeTimestamp]);

  return (
    <div className={styles.root}>
      <AnalogueView />
      <DigitalView />
    </div>
  );
};

/* d6f8289/src/CompositeClock/CompositeView.module.css */
.root {
  margin: 16px 8px;
  font-size: 16px;
}

After that, Jotai providers are initialized per app for app-wide states and per module for module-wide states:

// d6f8289/src/index.tsx
import { Provider } from 'jotai';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

// d6f8289/src/CompositeClock/CompositeView.tsx
-import { useAtomValue, useStore } from 'jotai';
+import { Provider, useAtomValue, useStore } from 'jotai';

...

+export const CompositeClock: FC = () => {
+  return (
+    <Provider>
+      <CompositeView />
+    </Provider>
+  );
+};

Then, the composite clock is exported and used in App.tsx:

// d6f8289/src/CompositeClock/index.ts
export { CompositeClock } from './CompositeView';

// d6f8289/src/App.tsx
import { FC } from 'react';
+import { CompositeClock } from './CompositeClock';

const App: FC = () => {
-  return null;
+  return <CompositeClock />;
};

export default App;

The example module built with Jotai is complete. Its codebase is hosted at review-of-state-management-in-react/04-kinds-of-lightweight-trials-mobx-zustand-jotai-and-valtio/d6f8289.

Review of state management with Jotai

In Jotai, state-changing logics are defined by state-changing hooks. To understand what states a state-changing hook changes, what state setting calls the hook invokes needs to be tracked out by looking into function bodies of the hook and other hooks invoked by the hook. But, unlike tracking state-changing events in MVC pattern, the tracking work in Jotai state-changing hooks is as easy as tracking plain functions, which makes states changing in Jotai predictable at limited cost. It can be perceived by checking how state-changing hooks TimeAtom.ts, AnalogueAtom.ts and DigitalAtom.ts work. Predictable states changing at limited cost of tracking invoked set calls in function bodies of state-changing hooks makes up the brightest pro of Jotai.

Besides, as Jotai store providers can be nested easily, module-wide states can be hosted easily in the Jotai store provider of a module while app-wide states are hosted in the Jotai store provider of the app, which makes a module able to be initialized easily for multiple instances with independent states. In the example, the Jotai store provider in src/CompositeClock/CompositeView.tsx hosts the module-wide states and the Jotai store provider in src/index.tsx hosts the app-wide states. Nestability of Jotai store providers leads to another major pro of Jotai.

For cons of Jotai, I don't think there is a noticeable one. Perhaps, one con is, the brightest pro of Jotai is not strong enough.

To sum up, doing state management with Jotai achieves predictable states changing at limited cost of tracking state-changing logics. By the way, if comparing Jotai with Recoil, it's easy to find that Jotai atoms are pretty much like Recoil atoms or selectors, which makes Jotai pretty much like a lightweight verson of Recoil.

Example module built with Valtio

Lastly, I would visit Valtio. Again, the React app is initialized with create-react-app --template typescript, src/App.tsx is cleared for later use, unused files are removed, the package of time helpers is installed:

$ npx create-react-app 04-kinds-of-lightweight-trials-mobx-zustand-jotai-and-valtio/f8e6217 --template typescript
# ...
$ cd 04-kinds-of-lightweight-trials-mobx-zustand-jotai-and-valtio/f8e6217

// f8e6217/src/App.tsx
import { FC } from 'react';

const App: FC = () => {
  return null;
};

export default App;

$ rm src/App.css src/App.test.tsx src/logo.svg

$ npm i date-fns

Then, to use Valtio, valtio is installed:

$ npm i valtio

The example module, the composite clock, would be all placed in src/CompositeClock, too. To match the 3 requried states, there would be 3 groups of state proxies, deriving proxies and state-changing functions placed seperately in TimeState.ts, AnalogueState.ts and DigitalState.ts. In Valtio, a state proxy in Valtio hosts a state as well as derived data from the state itself, and a deriving proxy hosts a derived datum from any states.

And for view components, there are AnalogueView.ts for the analogue clock, DigitalView.ts for the digital clock, and CompositeView.ts as a glue. Besides, some helper is built for initial states assigning.

The 3 groups of state proxies, deriving proxies and state-changing functions are coded as follows:

// f8e6217/src/CompositeClock/TimeState.ts
import { useInsertionEffect } from 'react';
import { proxy } from 'valtio';

export const timeState = proxy({
  timestamp: 0,
});

export function changeTimestamp(timestamp: number): void {
  timeState.timestamp = timestamp;
}

export function useHydrateTimeState(initialState: Partial<typeof timeState> = {}): void {
  useInsertionEffect(() => {
    Object.assign(timeState, initialState);
  }, []);
}

// f8e6217/src/CompositeClock/DigitalState.ts
import { format, isMatch, parse } from 'date-fns';
import { proxy } from 'valtio';
import { derive } from 'valtio/utils';
import { changeTimestamp, timeState } from './TimeState';

export const DIGITAL_TEXT_FORMAT = 'HH:mm:ss';

export const digitalState = proxy({
  isEditMode: false,
  editModeText: '',
  get isEditModeTextValid() {
    return isMatch(this.editModeText, DIGITAL_TEXT_FORMAT);
  },
});

export const digitalDerived = derive({
  displayText: (get) => format(get(timeState).timestamp, DIGITAL_TEXT_FORMAT),
});

export function enterEditMode(): void {
  if (digitalState.isEditMode) return;
  digitalState.isEditMode = true;
  digitalState.editModeText = digitalDerived.displayText;
}

export function exitEditMode(submit: boolean = true): void {
  if (!digitalState.isEditMode) return;
  digitalState.isEditMode = false;
  if (submit && digitalState.isEditModeTextValid) {
    changeTimestamp(
      parse(digitalState.editModeText, DIGITAL_TEXT_FORMAT, timeState.timestamp).getTime()
    );
  }
}

export function changeEditModeText(editModeText: string): void {
  digitalState.editModeText = editModeText;
}

// f8e6217/src/CompositeClock/AnalogueState.ts
import { proxy } from 'valtio';
import { derive } from 'valtio/utils';
import { changeTimestamp, timeState } from './TimeState';

const TWO_PI = 2 * Math.PI;

export interface AnalogueAngles {
  hour: number;
  minute: number;
  second: number;
}

export const analogueState = proxy({
  isEditMode: false,
  editModeAngles: { hour: 0, minute: 0, second: 0 } as AnalogueAngles,
});

export const analogueDerived = derive({
  displayAngles: (get) => {
    const d = new Date(get(timeState).timestamp);
    return {
      hour: ((d.getHours() % 12) / 12) * TWO_PI + (d.getMinutes() / 60) * (TWO_PI / 12),
      minute: (d.getMinutes() / 60) * TWO_PI + (d.getSeconds() / 60) * (TWO_PI / 60),
      second: (d.getSeconds() / 60) * TWO_PI,
    };
  },
});

export function enterEditMode(): void {
  if (analogueState.isEditMode) return;
  analogueState.isEditMode = true;
  analogueState.editModeAngles = analogueDerived.displayAngles;
}

export function exitEditMode(submit: boolean = true): void {
  if (!analogueState.isEditMode) return;
  analogueState.isEditMode = false;
  if (submit) {
    const d = new Date(timeState.timestamp);
    d.setHours(
      Math.floor((analogueState.editModeAngles.hour / TWO_PI) * 12) +
        12 * Math.floor(d.getHours() / 12)
    );
    d.setMinutes((analogueState.editModeAngles.minute / TWO_PI) * 60);
    d.setSeconds((analogueState.editModeAngles.second / TWO_PI) * 60);
    changeTimestamp(d.getTime());
  }
}

export function changeEditModeMinuteAngle(minuteAngle: number): void {
  analogueState.editModeAngles.minute = (minuteAngle + TWO_PI) % TWO_PI;
  analogueState.editModeAngles.hour =
    (Math.floor((analogueState.editModeAngles.hour / TWO_PI) * 12) + minuteAngle / TWO_PI) *
    (TWO_PI / 12);
}

And, the view components are coded as follows:

// f8e6217/src/CompositeClock/AnalogueView.tsx
import { FC, useCallback, useEffect } from 'react';
import { useSnapshot } from 'valtio';
import {
  analogueDerived,
  analogueState,
  changeEditModeMinuteAngle,
  enterEditMode,
  exitEditMode,
} from './AnalogueState';
import styles from './AnalogueView.module.css';

const TWO_PI = 2 * Math.PI;

interface Props {
  className?: string;
}

export const AnalogueView: FC<Props> = ({ className }) => {
  const { isEditMode, editModeAngles } = useSnapshot(analogueState);
  const { displayAngles } = useSnapshot(analogueDerived);

  const angles = isEditMode ? editModeAngles : displayAngles;

  const calcEditModeMinuteAngle = useCallback(
    (pointX: number, pointY: number): number => {
      const pointLen = Math.sqrt(Math.pow(pointX, 2) + Math.pow(pointY, 2));

      const normalizedX = pointX / pointLen;
      const normalizedY = pointY / pointLen;

      const oldX = Math.sin(editModeAngles.minute);
      const oldY = Math.cos(editModeAngles.minute);

      const rawMinuteAngle = Math.acos(normalizedY);

      const minuteAngle =
        normalizedY > 0 && oldY > 0
          ? normalizedX >= 0
            ? oldX < 0
              ? rawMinuteAngle + TWO_PI
              : rawMinuteAngle
            : oldX >= 0
            ? -rawMinuteAngle
            : -rawMinuteAngle + TWO_PI
          : normalizedX >= 0
          ? rawMinuteAngle
          : -rawMinuteAngle + TWO_PI;

      return minuteAngle;
    },
    [editModeAngles]
  );

  const onMinuteHandMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
    e.preventDefault();
    enterEditMode();
  }, []);

  const onMouseLeave = useCallback(() => exitEditMode(), []);

  const onMouseUp = useCallback(() => exitEditMode(), []);

  const onKeyDown = useCallback(
    (e: KeyboardEvent): void => {
      if (isEditMode && e.key === 'Escape') {
        exitEditMode(false);
      }
    },
    [isEditMode]
  );

  const onMouseMove = useCallback(
    (e: React.MouseEvent<HTMLDivElement>): void => {
      if (!isEditMode) return;

      const boundingBox = e.currentTarget.getBoundingClientRect();
      const originX = boundingBox.x + boundingBox.width / 2;
      const originY = boundingBox.y + boundingBox.height / 2;

      const pointX = e.clientX - originX;
      const pointY = originY - e.clientY;

      changeEditModeMinuteAngle(calcEditModeMinuteAngle(pointX, pointY));
    },
    [calcEditModeMinuteAngle, isEditMode]
  );

  useEffect(() => {
    window.addEventListener('keydown', onKeyDown);
    return () => window.removeEventListener('keydown', onKeyDown);
  }, [onKeyDown]);

  return (
    <div
      className={`${className ?? ''} ${styles.root} ${isEditMode ? styles.editMode : ''}`}
      onMouseLeave={onMouseLeave}
      onMouseUp={onMouseUp}
      onMouseMove={onMouseMove}
    >
      <div className={styles.axis} />
      <div
        className={`${styles.hand} ${styles.hour}`}
        style={{ transform: `rotateZ(${angles.hour}rad)` }}
      />
      <div
        className={`${styles.hand} ${styles.minute}`}
        style={{ transform: `rotateZ(${angles.minute}rad)` }}
        onMouseDown={onMinuteHandMouseDown}
      />
      <div
        className={`${styles.hand} ${styles.second}`}
        style={{ transform: `rotateZ(${angles.second}rad)` }}
      />
    </div>
  );
};

/* f8e6217/src/CompositeClock/AnalogueView.module.css */
.root {
  margin: 12px;
  padding: 8px;
  width: 160px;
  height: 160px;
  border-radius: 100%;
  border: 1px solid black;
  position: relative;
}

.axis {
  position: absolute;
  background-color: black;
  left: 47.5%;
  top: 47.5%;
  width: 5%;
  height: 5%;
  border-radius: 100%;
}

.hand {
  position: absolute;
  background-color: black;
  transform-origin: bottom center;
}

.hand.hour {
  left: 48.5%;
  top: 25%;
  height: 25%;
  width: 3%;
}

.hand.minute {
  left: 49%;
  top: 10%;
  height: 40%;
  width: 2%;
  z-index: 10;
  cursor: pointer;
}

.hand.second {
  left: 49.5%;
  top: 10%;
  height: 40%;
  width: 1%;
}

.editMode.root {
  outline: 2px solid skyblue;
}

// f8e6217/src/CompositeClock/DigitalView.tsx
import { FC, useCallback, useEffect, useRef } from 'react';
import { useSnapshot } from 'valtio';
import {
  changeEditModeText,
  digitalDerived,
  digitalState,
  DIGITAL_TEXT_FORMAT,
  enterEditMode,
  exitEditMode,
} from './DigitalState';
import styles from './DigitalView.module.css';

interface Props {
  className?: string;
}

export const DigitalView: FC<Props> = ({ className }) => {
  const { isEditMode, editModeText, isEditModeTextValid } = useSnapshot(digitalState, {
    sync: true,
  });
  const { displayText } = useSnapshot(digitalDerived);

  const refEditor = useRef<HTMLInputElement | null>(null);

  const onDisplayClick = enterEditMode;

  const onEditorBlur = useCallback(() => exitEditMode(false), []);

  const onEditorChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => changeEditModeText(e.target.value),
    []
  );

  const onEditorKeyDown = useCallback((e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      exitEditMode();
    }
  }, []);

  useEffect(() => {
    if (isEditMode && refEditor.current) {
      refEditor.current.select();
    }
  }, [isEditMode]);

  return (
    <div className={`${className ?? ''} ${styles.root} ${isEditMode ? styles.editMode : ''}`}>
      {isEditMode ? (
        <>
          <input
            className={styles.editor}
            type="text"
            ref={refEditor}
            value={editModeText}
            onBlur={onEditorBlur}
            onChange={onEditorChange}
            onKeyDown={onEditorKeyDown}
          />
          {!isEditModeTextValid && (
            <div className={styles.invalidHint}>
              The input time doesn't match the expected format which is '{DIGITAL_TEXT_FORMAT}'.
            </div>
          )}
        </>
      ) : (
        <div onClick={onDisplayClick}>{displayText}</div>
      )}
    </div>
  );
};

/* f8e6217/src/CompositeClock/DigitalView.module.css */
.root {
  border: 1px solid black;
  width: 200px;
  line-height: 30px;
  text-align: center;
}

.editor {
  width: 100%;
  text-align: center;
  font-size: inherit;
  padding: 0;
  border: none;
  outline: none;
}

.invalidHint {
  line-height: 1.2;
}

.editMode.root {
  outline: 2px solid skyblue;
}

// f8e6217/src/CompositeClock/CompositeView.tsx
import { FC, useCallback, useEffect, useRef } from 'react';
import { useSnapshot } from 'valtio';
import { analogueState } from './AnalogueState';
import { AnalogueView } from './AnalogueView';
import styles from './CompositeView.module.css';
import { digitalState } from './DigitalState';
import { DigitalView } from './DigitalView';
import { changeTimestamp, timeState, useHydrateTimeState } from './TimeState';

export const CompositeView: FC = () => {
  useHydrateTimeState({ timestamp: Date.now() });

  const { isEditMode: isEditModeInAnalogueClock } = useSnapshot(analogueState);
  const { isEditMode: isEditModeInDigitalClock } = useSnapshot(digitalState);

  const calcTimestampCorrection = useCallback(() => timeState.timestamp - Date.now(), []);

  const refTimeCorrection = useRef<number>(calcTimestampCorrection());

  useEffect(() => {
    if (!isEditModeInAnalogueClock || !isEditModeInDigitalClock) {
      refTimeCorrection.current = calcTimestampCorrection();
    }
  }, [calcTimestampCorrection, isEditModeInAnalogueClock, isEditModeInDigitalClock]);

  useEffect(() => {
    const tickHandler = setInterval(
      () => changeTimestamp(Date.now() + refTimeCorrection.current),
      100
    );
    return () => clearInterval(tickHandler);
  }, []);

  return (
    <div className={styles.root}>
      <AnalogueView />
      <DigitalView />
    </div>
  );
};

/* f8e6217/src/CompositeClock/CompositeView.module.css */
.root {
  margin: 16px 8px;
  font-size: 16px;
}

Then, the composite clock is exported and used in App.tsx:

// f8e6217/src/CompositeClock/index.ts
export { CompositeView as CompositeClock } from './CompositeView';

// d6f8289/src/App.tsx
import { FC } from 'react';
+import { CompositeClock } from './CompositeClock';

const App: FC = () => {
-  return null;
+  return <CompositeClock />;
};

export default App;

The example module built with Valtio is complete. Its codebase is hosted at review-of-state-management-in-react/04-kinds-of-lightweight-trials-mobx-zustand-jotai-and-valtio/f8e6217.

Review of state management with Valtio

In Valtio, state-changing logics are defined by state-changing functions. To understand what states a state-changing function changes, what state proxies the function changes needs to be tracked out by looking into function bodies of the function and other functions invoked by the function. But, unlike tracking state-changing events in MVC pattern, the tracking work in Valtio state-changing functions is as easy as tracking plain functions, which makes states changing in Valtio predictable at limited cost. It can be perceived by checking how TimeState.ts, AnalogueState.ts and DigitalState.ts work. Predictable states changing at limited cost of tracking changed state proxies in function bodies of state-changing hooks makes up the brightest pro of Valtio.

But, on the other hand, a module built with Valtio is actually not completely modularized by default, because when a module gets initialized for multiple instances, these instances are sharing exactly the same app-wide states. To resolve this issue, state proxies need to be hosted in React contexts and state-changing functions need to be returned from hooks, which is costly in Valtio. Incomplete modularization by default leads to the biggest con of Valtio.

Besides, a minor con of Valtio is, no strong support is provided for initial states assigning, so extra cost of development is needed.

To sum up, doing state management with Valtio achieves predictable states changing at limited cost of tracking state-changing logics as well as at extra cost of resolving incomplete modularization. Also, if comparing Valtio with MobX, it's easy to find that Valtio state proxies and state-changing functions are pretty much like MobX stores, which makes Valtio pretty much like a lightweight verson of MobX.

Summary for lightweight trials

After reviewing the 4 lightweight trials of state management, MobX, Zustand, Jotai and Valtio, the most insightful finding can be, they actually work no worse than reducer-like solutions and at no less cost of development. Because what states state-changing logics change can all be known at limited cost, they all achieve predictable states changing at limited cost. But, because of their different preferences, they result in extra cost of development on differently. In addition, because latest states can be accessed immediately after some states are changed, they have no inability in any kind of state-changing logics.

Then, another interesting insight is, Zustand is designed like a lightweight version of RTK, Jotai is designed like a lightweight version of Recoil, Valtio is designed like a lightweight version of MobX. I mention this because noticing this might help user devs have a more comprehensive understanding on these libraries, but I can't tell whether the authors designed them in these ways on purpose or by accident.

What's next

By far, as widely-accepted libraries of state management including reducer-like solutions, facebook's experiment, and lightweight trials have been reviewed, I think the question #1 in the initial article is answered well enough. Then, in the next article, I would make an overall summary and look into the question #2 in the initial article, What does a better library of state management in React look like?.

Review of state management in React: facebook's experiment - Recoil

Thu, 16 Mar 2023 13:00:00 +0000

After reviewing reducer-like solutions, Redux and its family, in the last article, continuing to answer the question #1 in the initial article , How good are today's widely-accepted libraries of state management in React?, I would look into facebook's experiment of state management in React, Recoil, by this article, to check out how facebook as maintainer of React does state management.

As mentioned previously, with the example of the composite clock built with MVC pattern from the initial article as a baseline, for Recoil, I would rebuild the same example module with it and review how good it is in comparison with the baseline.

Recalling the example module
Example module built with Recoil
Review of state management with Recoil
What's next

Recalling the example module

Example module built with Recoil

Now, let me build the example module with Recoil. Again, create-react-app is used to initialize the React app. The option --template typescript is used to enable TypeScript:

$ npx create-react-app 03-facebook-s-experiment-recoil --template typescript
# ...
$ cd 03-facebook-s-experiment-recoil

The version of CRA in use is 5.0.1 and the generated directory structure looks as follows:

$ tree -I node_modules
.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   └── setupTests.ts
└── tsconfig.json

2 directories, 19 files

Then, src/App.tsx is cleared for later use:

// src/App.tsx
import { FC } from 'react';

const App: FC = () => {
  return null;
};

export default App;

Following files are unused so removed:

$ rm src/App.css src/App.test.tsx src/logo.svg

Also, to help with time parsing and formating, date-fns is installed:

$ npm i date-fns

Then, to use Recoil, recoil is installed:

$ npm i recoil

The example module, the composite clock, would be all placed in src/CompositeClock. To match the 3 requried states, there would be 3 groups of atom states, selector states and state-changing hooks placed separately in TimeState.ts, AnalogueState.ts and DigitalState.ts. An atom state represents a state itself, a selector state represents the data deriving on one or more atom states or selector states, and a state-changing hook returns a function of state-changing logics to atom states or selector states.

And for view components, there are AnalogueView.ts for the analogue clock, DigitalView.ts for the digital clock, and CompositeView.ts as a glue. Besides, Recoil roots need to be initialized but doing it doesn't cost much.

In terms of coding, as the APIs whose names end with _UNSTABLE in Recoil are not yet finalized, I would avoid using them when possible.

The 3 groups of atom states, selector states and state-changing hooks are coded as follows:

// src/CompositeClock/TimeState.ts
import { atom, useRecoilCallback } from 'recoil';

export interface TimeStateValue {
  timestamp: number;
}

export const timeState = atom<TimeStateValue>({
  key: 'composite_clock-time',
  default: {
    timestamp: 0,
  },
});

export function useChangeTimestamp(): (timestamp: number) => void {
  return useRecoilCallback(
    ({ set }) =>
      (timestamp) => {
        set(timeState, (state) => ({ ...state, timestamp }));
      },
    []
  );
}

// src/CompositeClock/AnalogueState.ts
import { atom, selector, useRecoilCallback } from 'recoil';
import { timeState, useChangeTimestamp } from './TimeState';

const TWO_PI = 2 * Math.PI;

export interface AnalogueAngles {
  hour: number;
  minute: number;
  second: number;
}

export interface AnalogueStateValue {
  isEditMode: boolean;
  editModeAngles: AnalogueAngles;
}

export const analogueState = atom<AnalogueStateValue>({
  key: 'composite_clock-analogue',
  default: {
    isEditMode: false,
    editModeAngles: { hour: 0, minute: 0, second: 0 },
  },
});

export const displayAnglesState = selector<AnalogueAngles>({
  key: 'composite_clock-analogue_display_angles',
  get: ({ get }) => {
    const d = new Date(get(timeState).timestamp);
    return {
      hour: ((d.getHours() % 12) / 12) * TWO_PI + (d.getMinutes() / 60) * (TWO_PI / 12),
      minute: (d.getMinutes() / 60) * TWO_PI + (d.getSeconds() / 60) * (TWO_PI / 60),
      second: (d.getSeconds() / 60) * TWO_PI,
    };
  },
});

export function useEnterEditMode(): () => void {
  return useRecoilCallback(
    ({ snapshot, set }) =>
      () => {
        const { state: stateOfAnalogue, contents: analogue } = snapshot.getLoadable(analogueState);
        if (stateOfAnalogue !== 'hasValue') throw new Error('State of analogue not ready');

        if (analogue.isEditMode) return;

        const { state: stateOfDisplayAngles, contents: displayAngles } =
          snapshot.getLoadable(displayAnglesState);
        if (stateOfDisplayAngles !== 'hasValue')
          throw new Error('State of displayAngles not ready');

        set(analogueState, (state) => ({
          ...state,
          isEditMode: true,
          editModeAngles: displayAngles,
        }));
      },
    []
  );
}

export function useExitEditMode(): (submit?: boolean) => void {
  const changeTimestamp = useChangeTimestamp();

  return useRecoilCallback(
    ({ snapshot, set }) =>
      (submit = true) => {
        const { state: stateOfAnalogue, contents: analogue } = snapshot.getLoadable(analogueState);
        if (stateOfAnalogue !== 'hasValue') throw new Error('State of analogue not ready');

        if (!analogue.isEditMode) return;

        if (submit) {
          const { state: stateOfTime, contents: time } = snapshot.getLoadable(timeState);
          if (stateOfTime !== 'hasValue') throw new Error('State of time not ready');

          const d = new Date(time.timestamp);
          d.setHours(
            Math.floor((analogue.editModeAngles.hour / TWO_PI) * 12) +
              12 * Math.floor(d.getHours() / 12)
          );
          d.setMinutes((analogue.editModeAngles.minute / TWO_PI) * 60);
          d.setSeconds((analogue.editModeAngles.second / TWO_PI) * 60);
          changeTimestamp(d.getTime());
        }

        set(analogueState, (state) => ({ ...state, isEditMode: false }));
      },
    []
  );
}

export function useChangeEditModeMinuteAngle(): (minuteAngle: number) => void {
  return useRecoilCallback(({ set }) => (minuteAngle) => {
    set(analogueState, (state) => ({
      ...state,
      editModeAngles: {
        ...state.editModeAngles,
        minute: (minuteAngle + TWO_PI) % TWO_PI,
        hour:
          (Math.floor((state.editModeAngles.hour / TWO_PI) * 12) + minuteAngle / TWO_PI) *
          (TWO_PI / 12),
      },
    }));
  });
}

// src/CompositeClock/DigitalState.ts
import { format, isMatch, parse } from 'date-fns';
import { atom, selector, useRecoilCallback } from 'recoil';
import { timeState, useChangeTimestamp } from './TimeState';

export interface DigitalStateValue {
  isEditMode: boolean;
  editModeText: string;
}

export const DIGITAL_TEXT_FORMAT = 'HH:mm:ss';

export const digitalState = atom<DigitalStateValue>({
  key: 'composite_clock-digital',
  default: {
    isEditMode: false,
    editModeText: '',
  },
});

export const displayTextState = selector<string>({
  key: 'composite_clock-digital_display_text',
  get: ({ get }) => format(get(timeState).timestamp, DIGITAL_TEXT_FORMAT),
});

export const isEditModeTextValidState = selector<boolean>({
  key: 'composite_clock-digital_is_edit_mode_text_valid',
  get: ({ get }) => isMatch(get(digitalState).editModeText, DIGITAL_TEXT_FORMAT),
});

export function useEnterEditMode(): () => void {
  return useRecoilCallback(
    ({ snapshot, set }) =>
      () => {
        const { state: stateOfDigital, contents: digital } = snapshot.getLoadable(digitalState);
        if (stateOfDigital !== 'hasValue') throw new Error('State of digital not ready');

        if (digital.isEditMode) return;

        const { state: stateOfDisplayText, contents: displayText } =
          snapshot.getLoadable(displayTextState);
        if (stateOfDisplayText !== 'hasValue') throw new Error('State of displayText not ready');

        set(digitalState, (state) => ({ ...state, isEditMode: true, editModeText: displayText }));
      },
    []
  );
}

export function useExitEditMode(): (submit?: boolean) => void {
  const changeTimestamp = useChangeTimestamp();

  return useRecoilCallback(
    ({ snapshot, set }) =>
      (submit = true) => {
        const { state: stateOfDigital, contents: digital } = snapshot.getLoadable(digitalState);
        if (stateOfDigital !== 'hasValue') throw new Error('State of digital not ready');

        if (!digital.isEditMode) return;

        const { state: stateOfIsEditModeTextValid, contents: isEditModeTextValid } =
          snapshot.getLoadable(isEditModeTextValidState);
        if (stateOfIsEditModeTextValid !== 'hasValue')
          throw new Error('State of isEditModeTextValid not ready');

        if (submit && isEditModeTextValid) {
          const { state: stateOfTime, contents: time } = snapshot.getLoadable(timeState);
          if (stateOfTime !== 'hasValue') throw new Error('State of time not ready');

          changeTimestamp(
            parse(digital.editModeText, DIGITAL_TEXT_FORMAT, time.timestamp).getTime()
          );
        }
        set(digitalState, (state) => ({ ...state, isEditMode: false }));
      },
    [changeTimestamp]
  );
}

export function useChangeEditModeText(): (editModeText: string) => void {
  return useRecoilCallback(
    ({ set }) =>
      (editModeText) => {
        set(digitalState, (state) => ({ ...state, editModeText }));
      },
    []
  );
}

And, the view components are coded as follows:

// src/CompositeClock/AnalogueView.tsx
import { FC, useCallback, useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import {
  analogueState,
  displayAnglesState,
  useChangeEditModeMinuteAngle,
  useEnterEditMode,
  useExitEditMode,
} from './AnalogueState';
import styles from './AnalogueView.module.css';

const TWO_PI = 2 * Math.PI;

interface Props {
  className?: string;
}

export const AnalogueView: FC<Props> = ({ className }) => {
  const { isEditMode, editModeAngles } = useRecoilValue(analogueState);
  const displayAngles = useRecoilValue(displayAnglesState);

  const enterEditMode = useEnterEditMode();
  const exitEditMode = useExitEditMode();
  const changeEditModeMinuteAngle = useChangeEditModeMinuteAngle();

  const angles = isEditMode ? editModeAngles : displayAngles;

  const calcEditModeMinuteAngle = useCallback(
    (pointX: number, pointY: number): number => {
      const pointLen = Math.sqrt(Math.pow(pointX, 2) + Math.pow(pointY, 2));

      const normalizedX = pointX / pointLen;
      const normalizedY = pointY / pointLen;

      const oldX = Math.sin(editModeAngles.minute);
      const oldY = Math.cos(editModeAngles.minute);

      const rawMinuteAngle = Math.acos(normalizedY);

      const minuteAngle =
        normalizedY > 0 && oldY > 0
          ? normalizedX >= 0
            ? oldX < 0
              ? rawMinuteAngle + TWO_PI
              : rawMinuteAngle
            : oldX >= 0
            ? -rawMinuteAngle
            : -rawMinuteAngle + TWO_PI
          : normalizedX >= 0
          ? rawMinuteAngle
          : -rawMinuteAngle + TWO_PI;

      return minuteAngle;
    },
    [editModeAngles]
  );

  const onMinuteHandMouseDown = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      e.preventDefault();
      enterEditMode();
    },
    [enterEditMode]
  );

  const onMouseLeave = useCallback(() => exitEditMode(), [exitEditMode]);

  const onMouseUp = useCallback(() => exitEditMode(), [exitEditMode]);

  const onKeyDown = useCallback(
    (e: KeyboardEvent): void => {
      if (isEditMode && e.key === 'Escape') {
        exitEditMode(false);
      }
    },
    [isEditMode, exitEditMode]
  );

  const onMouseMove = useCallback(
    (e: React.MouseEvent<HTMLDivElement>): void => {
      if (!isEditMode) return;

      const boundingBox = e.currentTarget.getBoundingClientRect();
      const originX = boundingBox.x + boundingBox.width / 2;
      const originY = boundingBox.y + boundingBox.height / 2;

      const pointX = e.clientX - originX;
      const pointY = originY - e.clientY;

      changeEditModeMinuteAngle(calcEditModeMinuteAngle(pointX, pointY));
    },
    [calcEditModeMinuteAngle, changeEditModeMinuteAngle, isEditMode]
  );

  useEffect(() => {
    window.addEventListener('keydown', onKeyDown);
    return () => window.removeEventListener('keydown', onKeyDown);
  }, [onKeyDown]);

  return (
    <div
      className={`${className ?? ''} ${styles.root} ${isEditMode ? styles.editMode : ''}`}
      onMouseLeave={onMouseLeave}
      onMouseUp={onMouseUp}
      onMouseMove={onMouseMove}
    >
      <div className={styles.axis} />
      <div
        className={`${styles.hand} ${styles.hour}`}
        style={{ transform: `rotateZ(${angles.hour}rad)` }}
      />
      <div
        className={`${styles.hand} ${styles.minute}`}
        style={{ transform: `rotateZ(${angles.minute}rad)` }}
        onMouseDown={onMinuteHandMouseDown}
      />
      <div
        className={`${styles.hand} ${styles.second}`}
        style={{ transform: `rotateZ(${angles.second}rad)` }}
      />
    </div>
  );
};

/* src/CompositeClock/AnalogueView.module.css */
.root {
  margin: 12px;
  padding: 8px;
  width: 160px;
  height: 160px;
  border-radius: 100%;
  border: 1px solid black;
  position: relative;
}

.axis {
  position: absolute;
  background-color: black;
  left: 47.5%;
  top: 47.5%;
  width: 5%;
  height: 5%;
  border-radius: 100%;
}

.hand {
  position: absolute;
  background-color: black;
  transform-origin: bottom center;
}

.hand.hour {
  left: 48.5%;
  top: 25%;
  height: 25%;
  width: 3%;
}

.hand.minute {
  left: 49%;
  top: 10%;
  height: 40%;
  width: 2%;
  z-index: 10;
  cursor: pointer;
}

.hand.second {
  left: 49.5%;
  top: 10%;
  height: 40%;
  width: 1%;
}

.editMode.root {
  outline: 2px solid skyblue;
}

// src/CompositeClock/DigitalView.tsx
import { FC, useCallback, useEffect, useRef } from 'react';
import { useRecoilValue } from 'recoil';
import {
  digitalState,
  DIGITAL_TEXT_FORMAT,
  displayTextState,
  isEditModeTextValidState,
  useChangeEditModeText,
  useEnterEditMode,
  useExitEditMode,
} from './DigitalState';
import styles from './DigitalView.module.css';

interface Props {
  className?: string;
}

export const DigitalView: FC<Props> = ({ className }) => {
  const { isEditMode, editModeText } = useRecoilValue(digitalState);
  const displayText = useRecoilValue(displayTextState);
  const isEditModeTextValid = useRecoilValue(isEditModeTextValidState);

  const enterEditMode = useEnterEditMode();
  const exitEditMode = useExitEditMode();
  const changeEditModeText = useChangeEditModeText();

  const refEditor = useRef<HTMLInputElement | null>(null);

  const onDisplayClick = enterEditMode;

  const onEditorBlur = useCallback(() => exitEditMode(false), [exitEditMode]);

  const onEditorChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => changeEditModeText(e.target.value),
    [changeEditModeText]
  );

  const onEditorKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === 'Enter') {
        exitEditMode();
      }
    },
    [exitEditMode]
  );

  useEffect(() => {
    if (isEditMode && refEditor.current) {
      refEditor.current.select();
    }
  }, [isEditMode]);

  return (
    <div className={`${className ?? ''} ${styles.root} ${isEditMode ? styles.editMode : ''}`}>
      {isEditMode ? (
        <>
          <input
            className={styles.editor}
            type="text"
            ref={refEditor}
            value={editModeText}
            onBlur={onEditorBlur}
            onChange={onEditorChange}
            onKeyDown={onEditorKeyDown}
          />
          {!isEditModeTextValid && (
            <div className={styles.invalidHint}>
              The input time doesn't match the expected format which is '{DIGITAL_TEXT_FORMAT}'.
            </div>
          )}
        </>
      ) : (
        <div onClick={onDisplayClick}>{displayText}</div>
      )}
    </div>
  );
};

/* src/CompositeClock/DigitalView.module.css */
.root {
  border: 1px solid black;
  width: 200px;
  line-height: 30px;
  text-align: center;
}

.editor {
  width: 100%;
  text-align: center;
  font-size: inherit;
  padding: 0;
  border: none;
  outline: none;
}

.invalidHint {
  line-height: 1.2;
}

.editMode.root {
  outline: 2px solid skyblue;
}

// src/CompositeClock/CompositeView.tsx
import { FC, useEffect, useRef } from 'react';
import { useRecoilCallback, useRecoilValue } from 'recoil';
import { analogueState } from './AnalogueState';
import { AnalogueView } from './AnalogueView';
import styles from './CompositeView.module.css';
import { digitalState } from './DigitalState';
import { DigitalView } from './DigitalView';
import { timeState, useChangeTimestamp } from './TimeState';

export const CompositeView: FC = () => {
  const { isEditMode: isEditModeInAnalogueClock } = useRecoilValue(analogueState);
  const { isEditMode: isEditModeInDigitalClock } = useRecoilValue(digitalState);

  const changeTimestamp = useChangeTimestamp();

  const calcTimestampCorrection = useRecoilCallback(
    ({ snapshot }) =>
      () => {
        const { state: stateOfTime, contents: time } = snapshot.getLoadable(timeState);
        if (stateOfTime !== 'hasValue') throw new Error('State of time not ready');

        return time.timestamp - Date.now();
      },
    []
  );

  const refTimeCorrection = useRef<number>(calcTimestampCorrection());

  useEffect(() => {
    if (!isEditModeInAnalogueClock || !isEditModeInDigitalClock) {
      refTimeCorrection.current = calcTimestampCorrection();
    }
  }, [calcTimestampCorrection, isEditModeInAnalogueClock, isEditModeInDigitalClock]);

  useEffect(() => {
    const tickHandler = setInterval(
      () => changeTimestamp(Date.now() + refTimeCorrection.current),
      100
    );
    return () => clearInterval(tickHandler);
  }, [changeTimestamp]);

  return (
    <div className={styles.root}>
      <AnalogueView />
      <DigitalView />
    </div>
  );
};

/* src/CompositeClock/CompositeView.module.css */
.root {
  margin: 16px 8px;
  font-size: 16px;
}

After that, Recoil roots are initialized per app for app-wide states and per module for module-wide states:

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { RecoilRoot } from 'recoil';
import App from './App';
import './index.css';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

// src/CompositeClock/CompositeView.tsx
import { FC, useEffect, useRef } from 'react';
-import { useRecoilCallback, useRecoilValue } from 'recoil';
+import { RecoilRoot, useRecoilCallback, useRecoilValue } from 'recoil';

...

+export const CompositeClock: FC = () => {
+  return (
+    <RecoilRoot
+      initializeState={(snapshot) => {
+        snapshot.set(timeState, { timestamp: Date.now() });
+      }}
+    >
+      <CompositeView />
+    </RecoilRoot>
+  );
+};

Then, the composite clock is exported and used in App.tsx:

// src/CompositeClock/index.ts
export { CompositeClock } from './CompositeView';

// src/App.tsx
import { FC } from 'react';
+import { CompositeClock } from './CompositeClock';

const App: FC = () => {
-  return null;
+  return <CompositeClock />;
};

export default App;

The example module built with Recoil is complete. It can be previewed with the command npm start and its codebase is hosted at review-of-state-management-in-react/03-facebook-s-experiment-recoil.

Review of state management with Recoil

In Recoil, state-changing logics are defined by state-changing hooks. To understand what states a state-changing hook changes, what set calls the hook invokes needs to be tracked out by looking into function bodies of the hook and other hooks invoked by the hook. But, unlike tracking state-changing events in MVC pattern, the tracking work in Recoil state-changing hooks is as easy as tracking plain functions, which makes states changing in Recoil predictable at limited cost. It can be perceived by checking how state-changing hooks in TimeState.ts, AnalogueState.ts and DigitalState.ts work. Predictable states changing at limited cost of tracking invoked set calls in function bodies of state-changing hooks makes up the brightest pro of Recoil.

Besides, as Recoil roots can be nested easily, module-wide states can be hosted easily in the Recoil root of a module while app-wide states are hosted in the Recoil root of the app, which makes a module able to be initialized easily for multiple instances with independent states. In the example, the Recoil root in src/CompositeClock/CompositeView.tsx hosts the module-wide states and the Recoil root in src/index.tsx hosts the app-wide states. Nestability of Recoil roots leads to another major pro of Recoil.

Though, on the other hand, the biggest con of Recoil is, as Recoil cares quite much about asynchronousness, accessing a state in state-changing hooks always requires checking the state of the state, which takes extra cost of development. (Although the not-yet-finalized API useRecoilTransaction_UNSTABLE provides easier ways to access a state, it can't be foreseen what it will eventually look like after asynchronousness is fully taken into consideration.) Besides, another major con of Recoil is, naming unique keys in the scope of the nearest Recoil root for atom states and selector states is always required, which takes extra cost, too.

To sum up, doing state management with Recoil achieves predictable states changing at limited cost of tracking state-changing logics as well as at extra cost of handling asynchronousness burdens and naming unique keys for states.

What's next

By far, reducer-like solutions, Redux and its family, and facebook's experiment, Recoil, have been reviewed compared with MVC pattern. Then, in the next article, continuing to answer the question #1 in the initial article, I would look into kinds of lightweight trials of state management in React - MobX, Zustand, Jotai and Valtio.

Review of state management in React: reducer-like solutions - Redux and its family

Fri, 10 Mar 2023 13:00:00 +0000

Continuing to answer the question #1 in the last article, How good are today's widely-accepted libraries of state management in React?, I would look into reducer-like solutions of state management in React by this article, because they have become so widely-accepted that the most well-known one, Redux, is used in 1/3 of all React projects and even React itself provides a built-in hook useReducer.

As mentioned previously, with the example of the composite clock built with MVC pattern from the last article as a baseline, for each reducer-like solution, I would rebuild the same example module with it and review how good it is in comparison with the baseline.

Reduce function
Recalling the example module
Example module built with Redux
Review of state management with Redux
Example module built with Redux Toolkit
Review of state management with Redux Toolkit
Example module built with Flux
Review of state management with Flux
Example module built with useReducer
Review of state management with useReducer
Summary for reducer-like solutions
What's next

Reduce function

Reduce function was formally introduced as a general higher-order function in functional programming. It takes a binary operator and an initial result to produce a function that can process a list of values to return a final result. The binary operator is able to process a result and a value at a time to return a new result, so values in a list can be processed in sequence to return the final result from the initial result. And, this operator is called reducer, which can be depicted as follows:

type Reducer<TResult, TValue> = (result: TResult, value: TValue) => TResult;

By reducer-like solutions of state management, I mean those libraries that do states changing in state management by using reducers or some similar ways. Reducers of them treat states as results and action payloads of user interactions as values, so action payloads can be processed in sequence to return the next state from the previous state:

type Reducer<TState, TAction> = (state: TState, action: TAction) => TState;

In the perspective of the data flow, view components handle user interactions to dispatch actions to reducers and get the states back to render themselves in a timely manner. By the way, an action can also be dispatched anywhere except reducers.

Among reducer-like solutions, Redux and its family are the most widely accepted. For a comprehensive understanding, I would look into every important member in this family and my focus includes Redux itself, its child Redux Toolkit(RTK), its parent Flux and its nephew useReducer.

Recalling the example module

Before that, let me recall the requirement of the example module a bit in case a reader might not have time to fully read the last article. If the last article has been read, this section can be skipped:

Example module built with Redux

Now, I would look into Redux first. Again, create-react-app is used to initialize the React app. The option --template typescript is used to enable TypeScript:

$ npx create-react-app 02-reducer-like-solutions-redux-and-its-family/77ed362 --template typescript
# ...
$ cd 02-reducer-like-solutions-redux-and-its-family/77ed362

The version of CRA in use is 5.0.1 and the generated directory structure looks as follows:

$ tree -I node_modules
.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   └── setupTests.ts
└── tsconfig.json

2 directories, 19 files

Then, src/App.tsx is cleared for later use:

// 77ed362/src/App.tsx
import { FC } from 'react';

const App: FC = () => {
  return null;
};

export default App;

Following files are unused so removed:

$ rm src/App.css src/App.test.tsx src/logo.svg

Also, to help with time parsing and formating, date-fns is installed:

$ npm i date-fns

Then, to use Redux, redux and react-redux are installed:

$ npm i redux react-redux

The example module, the composite clock, would be all placed in src/CompositeClock. To match the 3 requried states, there would be 3 reducers with their actions, TimeReducer.ts with TimeActions.ts, AnalogueReducer.ts with AnalogueActions.ts and DigitalReducer.ts with DigitalActions.ts. For data deriving in Redux, it's achieved by using selectors which are basically getters on states and usually placed together with reducers.

And for view components, there are AnalogueView.ts for the analogue clock, DigitalView.ts for the digital clock, and CompositeView.ts as a glue. Besides, a Redux setup of a root store and related helpers is needed.

In terms of coding, all reducers are dependent on their actions for using the action types, some actions are dependent on the Redux setup for accessing the root store, the Redux setup is dependent on reducers for building the root store, which constitutes circular dependency in some cases. To get this coded, I would start from the Redux setup, then evolve it along with the rest parts step by step.

The Redux setup is initially coded as follows:

// 77ed362/src/reduxStore.ts
import { AnyAction, combineReducers, createStore, Store } from 'redux';

export type AppAction = AnyAction;

export interface AppState {}

export type AppStore = Store<AppState, AppAction>;

export type AppDispatch = AppStore['dispatch'];

export function createAppStore(initialState: Partial<AppState> = {}): AppStore {
  const store = createStore(combineReducers({}), initialState);
  return store;
}

// 77ed362/src/reduxHooks.ts
import { TypedUseSelectorHook, useDispatch, useSelector, useStore } from 'react-redux';
import type { AppAction, AppDispatch, AppState } from './reduxStore';

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<AppState> = useSelector;
export const useAppStore = () => useStore<AppState, AppAction>();

// 77ed362/src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import App from './App';
import './index.css';
import { createAppStore } from './reduxStore';
import reportWebVitals from './reportWebVitals';

const appStore = createAppStore();

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <Provider store={appStore}>
      <App />
    </Provider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

The reducer with its actions for the state of time and the integration with the Redux setup are coded as follows:

// 77ed362/src/CompositeClock/TimeActions.ts
const NS = 'COMPOSITE_CLOCK-TIME';

export const ActionTypes = {
  CHANGE_TIMESTAMP: `${NS}-CHANGE_TIMESTAMP`,
} as const;

export type TimeAction = { type: typeof ActionTypes['CHANGE_TIMESTAMP']; timestamp: number };

export function changeTimestamp(timestamp: number): TimeAction {
  return {
    type: ActionTypes.CHANGE_TIMESTAMP,
    timestamp,
  };
}

// 77ed362/src/CompositeClock/TimeReducer.ts
import { ActionTypes, TimeAction } from './TimeActions';

export interface TimeState {
  timestamp: number;
}

export function timeReducer(
  state: TimeState = {
    timestamp: 0,
  },
  action: TimeAction
): TimeState {
  switch (action.type) {
    case ActionTypes.CHANGE_TIMESTAMP:
      return { ...state, timestamp: action.timestamp };
  }
  return state;
}

// 77ed362/src/CompositeClock/index.ts
export type { TimeAction } from './TimeActions';
export * from './TimeReducer';

// 77ed362/src/reduxStore.ts
-import { AnyAction, combineReducers, createStore, Store } from 'redux';
+import { combineReducers, createStore, Store } from 'redux';
+import { TimeAction, timeReducer, TimeState } from './CompositeClock';

-export type AppAction = AnyAction;
+export type AppAction = TimeAction;

-export interface AppState {}
+export interface AppState {
+  timeOfClock: TimeState;
+}

...

export function createAppStore(initialState: Partial<AppState> = {}): AppStore {
-  const store = createStore(combineReducers({}), initialState);
+  const store = createStore(combineReducers({
+    timeOfClock: timeReducer,
+  }), initialState);
  return store;
}

// 77ed362/src/index.tsx
...

-const appStore = createAppStore();
+const appStore = createAppStore({
+  timeOfClock: {
+    timestamp: Date.now(),
+  },
+});

...

The reducer with its actions for the state of the analogue clock and the integration with the Redux setup are coded as follows. Because AnalogueReducer.ts is dependent on AnalogueActions.ts, AnalogueActions.ts is dependent on reduxStore.ts, reduxStore.ts is dependent on AnalogueReducer.ts and they constitue circle dependency, I would code AnalogueActions.ts and AnalogueReducer.ts partially at first, adjust reduxStore.ts next, code AnalogueActions.ts and AnalogueReducer.ts completely in the end:

// 77ed362/src/CompositeClock/AnalogueActions.ts
const NS = 'COMPOSITE_CLOCK-ANALOGUE';

export const ActionTypes = {
  ENTER_EDIT_MODE: `${NS}-ENTER_EDIT_MODE`,
  EXIT_EDIT_MODE: `${NS}-EXIT_EDIT_MODE`,
  CHANGE_EDIT_MODE_MINUTE_ANGLE: `${NS}-CHANGE_EDIT_MODE_MINUTE_ANGLE`,
} as const;

export type AnalogueAction =
  | { type: typeof ActionTypes['ENTER_EDIT_MODE'] }
  | { type: typeof ActionTypes['EXIT_EDIT_MODE'] }
  | { type: typeof ActionTypes['CHANGE_EDIT_MODE_MINUTE_ANGLE'] };

// 77ed362/src/CompositeClock/AnalogueReducer.ts
import { ActionTypes, AnalogueAction } from './AnalogueActions';
import type { TimeState } from './TimeReducer';

const TWO_PI = 2 * Math.PI;

export interface AnalogueAngles {
  hour: number;
  minute: number;
  second: number;
}

export interface AnalogueState {
  isEditMode: boolean;
  editModeAngles: AnalogueAngles;
}

export function analogueReducer(
  state: AnalogueState = {
    isEditMode: false,
    editModeAngles: { hour: 0, minute: 0, second: 0 },
  },
  action: AnalogueAction
): AnalogueState {
  switch (action.type) {
    case ActionTypes.ENTER_EDIT_MODE:
    case ActionTypes.EXIT_EDIT_MODE:
    case ActionTypes.CHANGE_EDIT_MODE_MINUTE_ANGLE:
  }
  return state;
}

export function getDisplayAngles(timeState: TimeState): AnalogueAngles {
  const d = new Date(timeState.timestamp);
  return {
    hour: ((d.getHours() % 12) / 12) * TWO_PI + (d.getMinutes() / 60) * (TWO_PI / 12),
    minute: (d.getMinutes() / 60) * TWO_PI + (d.getSeconds() / 60) * (TWO_PI / 60),
    second: (d.getSeconds() / 60) * TWO_PI,
  };
}

// 77ed362/src/CompositeClock/index.ts
+export type { AnalogueAction } from './AnalogueActions';
+export * from './AnalogueReducer';
export type { TimeAction } from './TimeActions';
export * from './TimeReducer';

// 77ed362/src/reduxStore.ts
import { combineReducers, createStore, Store } from 'redux';
-import { TimeAction, timeReducer, TimeState } from './CompositeClock';
+import {
+  AnalogueAction,
+  analogueReducer,
+  AnalogueState,
+  TimeAction,
+  timeReducer,
+  TimeState,
+} from './CompositeClock';

-export type AppAction = TimeAction;
+export type AppAction = TimeAction | AnalogueAction;

export interface AppState {
  timeOfClock: TimeState;
+  analogueClock: AnalogueState;
}

...

export function createAppStore(initialState: Partial<AppState> = {}): AppStore {
  const store = createStore(
    combineReducers({
      timeOfClock: timeReducer,
+      analogueClock: analogueReducer,
    }),
    initialState
  );
  return store;
}

// 77ed362/src/CompositeClock/AnalogueActions.ts
+import type { AppStore } from '../reduxStore';
+import { AnalogueAngles, getDisplayAngles } from './AnalogueReducer';
+import { changeTimestamp } from './TimeActions';
+
+const TWO_PI = 2 * Math.PI;
+
const NS = 'COMPOSITE_CLOCK-ANALOGUE';

export const ActionTypes = {
  ENTER_EDIT_MODE: `${NS}-ENTER_EDIT_MODE`,
  EXIT_EDIT_MODE: `${NS}-EXIT_EDIT_MODE`,
  CHANGE_EDIT_MODE_MINUTE_ANGLE: `${NS}-CHANGE_EDIT_MODE_MINUTE_ANGLE`,
} as const;

export type AnalogueAction =
-  | { type: typeof ActionTypes['ENTER_EDIT_MODE'] }
+  | { type: typeof ActionTypes['ENTER_EDIT_MODE']; editModeAngles: AnalogueAngles }
  | { type: typeof ActionTypes['EXIT_EDIT_MODE'] }
-  | { type: typeof ActionTypes['CHANGE_EDIT_MODE_MINUTE_ANGLE'] };
+  | { type: typeof ActionTypes['CHANGE_EDIT_MODE_MINUTE_ANGLE']; minuteAngle: number };
+
+export function dispatchEnterEditMode(store: AppStore): void {
+  const { timeOfClock, analogueClock } = store.getState();
+  if (analogueClock.isEditMode) return;
+  const editModeAngles = getDisplayAngles(timeOfClock);
+  store.dispatch({
+    type: ActionTypes.ENTER_EDIT_MODE,
+    editModeAngles,
+  });
+}
+
+export function dispatchExitEditMode(store: AppStore, submit: boolean = true): void {
+  const { timeOfClock, analogueClock } = store.getState();
+  if (!analogueClock.isEditMode) return;
+  if (submit) {
+    const d = new Date(timeOfClock.timestamp);
+    d.setHours(
+      Math.floor((analogueClock.editModeAngles.hour / TWO_PI) * 12) +
+        12 * Math.floor(d.getHours() / 12)
+    );
+    d.setMinutes((analogueClock.editModeAngles.minute / TWO_PI) * 60);
+    d.setSeconds((analogueClock.editModeAngles.second / TWO_PI) * 60);
+    store.dispatch(changeTimestamp(d.getTime()));
+  }
+  store.dispatch({ type: ActionTypes.EXIT_EDIT_MODE });
+}
+
+export function changeEditModeMinuteAngle(minuteAngle: number): AnalogueAction {
+  return { type: ActionTypes.CHANGE_EDIT_MODE_MINUTE_ANGLE, minuteAngle };
+}

// 77ed362/src/CompositeClock/AnalogueReducer.ts
...

export function analogueReducer(
  state: AnalogueState = {
    isEditMode: false,
    editModeAngles: { hour: 0, minute: 0, second: 0 },
  },
  action: AnalogueAction
): AnalogueState {
  switch (action.type) {
    case ActionTypes.ENTER_EDIT_MODE:
+      return { ...state, isEditMode: true, editModeAngles: action.editModeAngles };
    case ActionTypes.EXIT_EDIT_MODE:
+      return { ...state, isEditMode: false };
    case ActionTypes.CHANGE_EDIT_MODE_MINUTE_ANGLE:
+      return {
+        ...state,
+        editModeAngles: {
+          ...state.editModeAngles,
+          minute: (action.minuteAngle + TWO_PI) % TWO_PI,
+          hour:
+            (Math.floor((state.editModeAngles.hour / TWO_PI) * 12) + action.minuteAngle / TWO_PI) *
+            (TWO_PI / 12),
+        },
+      };
  }
  return state;
}

...

The reducer with its actions for the state of the digital clock and the integration with the Redux setup are coded as follows. Again, because DigitalReducer.ts is dependent on DigitalActions.ts, DigitalActions.ts is dependent on reduxStore.ts, reduxStore.ts is dependent on DigitalReducer.ts and they constitue circular dependency, I would code DigitalActions.ts and DigitalReducer.ts partially at first, adjust reduxStore.ts next, code DigitalActions.ts and DigitalReducer.ts completely in the end:

// 77ed362/src/CompositeClock/DigitalActions.ts
const NS = 'COMPOSITE_CLOCK-DIGITAL';

export const ActionTypes = {
  ENTER_EDIT_MODE: `${NS}-ENTER_EDIT_MODE`,
  EXIT_EDIT_MODE: `${NS}-EXIT_EDIT_MODE`,
  CHANGE_EDIT_MODE_TEXT: `${NS}-CHANGE_EDIT_MODE_TEXT`,
} as const;

export type DigitalAction =
  | { type: typeof ActionTypes['ENTER_EDIT_MODE'] }
  | { type: typeof ActionTypes['EXIT_EDIT_MODE'] }
  | { type: typeof ActionTypes['CHANGE_EDIT_MODE_TEXT'] };

// 77ed362/src/CompositeClock/DigitalReducer.ts
import { format, isMatch } from 'date-fns';
import { ActionTypes, DigitalAction } from './DigitalActions';
import type { TimeState } from './TimeReducer';

export interface DigitalState {
  isEditMode: boolean;
  editModeText: string;
}

export const DIGITAL_TEXT_FORMAT = 'HH:mm:ss';

export function digitalReducer(
  state: DigitalState = {
    isEditMode: false,
    editModeText: '',
  },
  action: DigitalAction
): DigitalState {
  switch (action.type) {
    case ActionTypes.ENTER_EDIT_MODE:
    case ActionTypes.EXIT_EDIT_MODE:
    case ActionTypes.CHANGE_EDIT_MODE_TEXT:
  }
  return state;
}

export function isEditModeTextValid(state: DigitalState): boolean {
  return isMatch(state.editModeText, DIGITAL_TEXT_FORMAT);
}

export function getDisplayText(timeState: TimeState): string {
  return format(timeState.timestamp, DIGITAL_TEXT_FORMAT);
}

// 77ed362/src/CompositeClock/index.ts
export type { AnalogueAction } from './AnalogueActions';
export * from './AnalogueReducer';
+export type { DigitalAction } from './DigitalActions';
+export * from './DigitalReducer';
export type { TimeAction } from './TimeActions';
export * from './TimeReducer';

// 77ed362/src/reduxStore.ts
import { combineReducers, createStore, Store } from 'redux';
import {
  AnalogueAction,
  analogueReducer,
  AnalogueState,
+  DigitalAction,
+  digitalReducer,
+  DigitalState,
  TimeAction,
  timeReducer,
  TimeState,
} from './CompositeClock';

-export type AppAction = TimeAction | AnalogueAction;
+export type AppAction = TimeAction | AnalogueAction | DigitalAction;

export interface AppState {
  timeOfClock: TimeState;
  analogueClock: AnalogueState;
+  digitalClock: DigitalState;
}

export type AppStore = Store<AppState, AppAction>;

export type AppDispatch = AppStore['dispatch'];

export function createAppStore(initialState: Partial<AppState> = {}): AppStore {
  const store = createStore(
    combineReducers({
      timeOfClock: timeReducer,
      analogueClock: analogueReducer,
+      digitalClock: digitalReducer,
    }),
    initialState
  );
  return store;
}

// 77ed362/src/CompositeClock/DigitalActions.ts
+import { parse } from 'date-fns';
+import type { AppStore } from '../reduxStore';
+import { DIGITAL_TEXT_FORMAT, getDisplayText, isEditModeTextValid } from './DigitalReducer';
+import { changeTimestamp } from './TimeActions';
+
const NS = 'COMPOSITE_CLOCK-DIGITAL';

export const ActionTypes = {
  ENTER_EDIT_MODE: `${NS}-ENTER_EDIT_MODE`,
  EXIT_EDIT_MODE: `${NS}-EXIT_EDIT_MODE`,
  CHANGE_EDIT_MODE_TEXT: `${NS}-CHANGE_EDIT_MODE_TEXT`,
} as const;

export type DigitalAction =
-  | { type: typeof ActionTypes['ENTER_EDIT_MODE'] }
+  | { type: typeof ActionTypes['ENTER_EDIT_MODE']; editModeText: string }
  | { type: typeof ActionTypes['EXIT_EDIT_MODE'] }
-  | { type: typeof ActionTypes['CHANGE_EDIT_MODE_TEXT'] };
+  | { type: typeof ActionTypes['CHANGE_EDIT_MODE_TEXT']; editModeText: string };
+
+export function dispatchEnterEditMode(store: AppStore): void {
+  const { timeOfClock, digitalClock } = store.getState();
+  if (digitalClock.isEditMode) return;
+  const editModeText = getDisplayText(timeOfClock);
+  store.dispatch({
+    type: ActionTypes.ENTER_EDIT_MODE,
+    editModeText,
+  });
+}
+
+export function dispatchExitEditMode(store: AppStore, submit: boolean = true): void {
+  const { timeOfClock, digitalClock } = store.getState();
+  if (!digitalClock.isEditMode) return;
+  if (submit && isEditModeTextValid(digitalClock)) {
+    store.dispatch(
+      changeTimestamp(
+        parse(digitalClock.editModeText, DIGITAL_TEXT_FORMAT, timeOfClock.timestamp).getTime()
+      )
+    );
+  }
+  store.dispatch({ type: ActionTypes.EXIT_EDIT_MODE });
+}
+
+export function changeEditModeText(editModeText: string): DigitalAction {
+  return { type: ActionTypes.CHANGE_EDIT_MODE_TEXT, editModeText };
+}

// 77ed362/src/CompositeClock/DigitalReducer.ts
...

export function digitalReducer(
  state: DigitalState = {
    isEditMode: false,
    editModeText: '',
  },
  action: DigitalAction
): DigitalState {
  switch (action.type) {
    case ActionTypes.ENTER_EDIT_MODE:
+      return { ...state, isEditMode: true, editModeText: action.editModeText };
    case ActionTypes.EXIT_EDIT_MODE:
+      return { ...state, isEditMode: false };
    case ActionTypes.CHANGE_EDIT_MODE_TEXT:
+      return { ...state, editModeText: action.editModeText };
  }
  return state;
}

...

After that, the view components are coded as follows:

// 77ed362/src/CompositeClock/AnalogueView.tsx
import { FC, useCallback, useEffect } from 'react';
import { useAppDispatch, useAppSelector, useAppStore } from '../reduxHooks';
import {
  changeEditModeMinuteAngle,
  dispatchEnterEditMode,
  dispatchExitEditMode,
} from './AnalogueActions';
import { getDisplayAngles } from './AnalogueReducer';
import styles from './AnalogueView.module.css';

const TWO_PI = 2 * Math.PI;

interface Props {
  className?: string;
}

export const AnalogueView: FC<Props> = ({ className }) => {
  const store = useAppStore();
  const dispatch = useAppDispatch();
  const state = useAppSelector((appState) => appState.analogueClock);
  const { isEditMode, editModeAngles } = state;
  const displayAngles = useAppSelector((appState) => getDisplayAngles(appState.timeOfClock));

  const angles = isEditMode ? editModeAngles : displayAngles;

  const calcEditModeMinuteAngle = useCallback(
    (pointX: number, pointY: number): number => {
      const pointLen = Math.sqrt(Math.pow(pointX, 2) + Math.pow(pointY, 2));

      const normalizedX = pointX / pointLen;
      const normalizedY = pointY / pointLen;

      const oldX = Math.sin(editModeAngles.minute);
      const oldY = Math.cos(editModeAngles.minute);

      const rawMinuteAngle = Math.acos(normalizedY);

      const minuteAngle =
        normalizedY > 0 && oldY > 0
          ? normalizedX >= 0
            ? oldX < 0
              ? rawMinuteAngle + TWO_PI
              : rawMinuteAngle
            : oldX >= 0
            ? -rawMinuteAngle
            : -rawMinuteAngle + TWO_PI
          : normalizedX >= 0
          ? rawMinuteAngle
          : -rawMinuteAngle + TWO_PI;

      return minuteAngle;
    },
    [editModeAngles]
  );

  const onMinuteHandMouseDown = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      e.preventDefault();
      dispatchEnterEditMode(store);
    },
    [store]
  );

  const onMouseLeave = useCallback(() => dispatchExitEditMode(store), [store]);

  const onMouseUp = useCallback(() => dispatchExitEditMode(store), [store]);

  const onKeyDown = useCallback(
    (e: KeyboardEvent): void => {
      if (isEditMode && e.key === 'Escape') {
        dispatchExitEditMode(store, false);
      }
    },
    [isEditMode, store]
  );

  const onMouseMove = useCallback(
    (e: React.MouseEvent<HTMLDivElement>): void => {
      if (!isEditMode) return;

      const boundingBox = e.currentTarget.getBoundingClientRect();
      const originX = boundingBox.x + boundingBox.width / 2;
      const originY = boundingBox.y + boundingBox.height / 2;

      const pointX = e.clientX - originX;
      const pointY = originY - e.clientY;

      dispatch(changeEditModeMinuteAngle(calcEditModeMinuteAngle(pointX, pointY)));
    },
    [calcEditModeMinuteAngle, dispatch, isEditMode]
  );

  useEffect(() => {
    window.addEventListener('keydown', onKeyDown);
    return () => window.removeEventListener('keydown', onKeyDown);
  }, [onKeyDown]);

  return (
    <div
      className={`${className ?? ''} ${styles.root} ${isEditMode ? styles.editMode : ''}`}
      onMouseLeave={onMouseLeave}
      onMouseUp={onMouseUp}
      onMouseMove={onMouseMove}
    >
      <div className={styles.axis} />
      <div
        className={`${styles.hand} ${styles.hour}`}
        style={{ transform: `rotateZ(${angles.hour}rad)` }}
      />
      <div
        className={`${styles.hand} ${styles.minute}`}
        style={{ transform: `rotateZ(${angles.minute}rad)` }}
        onMouseDown={onMinuteHandMouseDown}
      />
      <div
        className={`${styles.hand} ${styles.second}`}
        style={{ transform: `rotateZ(${angles.second}rad)` }}
      />
    </div>
  );
};

/* 77ed362/src/CompositeClock/AnalogueView.module.css */
.root {
  margin: 12px;
  padding: 8px;
  width: 160px;
  height: 160px;
  border-radius: 100%;
  border: 1px solid black;
  position: relative;
}

.axis {
  position: absolute;
  background-color: black;
  left: 47.5%;
  top: 47.5%;
  width: 5%;
  height: 5%;
  border-radius: 100%;
}

.hand {
  position: absolute;
  background-color: black;
  transform-origin: bottom center;
}

.hand.hour {
  left: 48.5%;
  top: 25%;
  height: 25%;
  width: 3%;
}

.hand.minute {
  left: 49%;
  top: 10%;
  height: 40%;
  width: 2%;
  z-index: 10;
  cursor: pointer;
}

.hand.second {
  left: 49.5%;
  top: 10%;
  height: 40%;
  width: 1%;
}

.editMode.root {
  outline: 2px solid skyblue;
}

// 77ed362/src/CompositeClock/DigitalView.tsx
import { FC, useCallback, useEffect, useRef } from 'react';
import { useAppDispatch, useAppSelector, useAppStore } from '../reduxHooks';
import { changeEditModeText, dispatchEnterEditMode, dispatchExitEditMode } from './DigitalActions';
import { DIGITAL_TEXT_FORMAT, getDisplayText, isEditModeTextValid } from './DigitalReducer';
import styles from './DigitalView.module.css';

interface Props {
  className?: string;
}

export const DigitalView: FC<Props> = ({ className }) => {
  const store = useAppStore();
  const dispatch = useAppDispatch();
  const state = useAppSelector((appState) => appState.digitalClock);
  const { isEditMode, editModeText } = state;
  const displayText = useAppSelector((appState) => getDisplayText(appState.timeOfClock));

  const refEditor = useRef<HTMLInputElement | null>(null);

  const onDisplayClick = useCallback(() => dispatchEnterEditMode(store), [store]);

  const onEditorBlur = useCallback(() => dispatchExitEditMode(store, false), [store]);

  const onEditorChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => dispatch(changeEditModeText(e.target.value)),
    [dispatch]
  );

  const onEditorKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === 'Enter') {
        dispatchExitEditMode(store);
      }
    },
    [store]
  );

  useEffect(() => {
    if (isEditMode && refEditor.current) {
      refEditor.current.select();
    }
  }, [isEditMode]);

  return (
    <div className={`${className ?? ''} ${styles.root} ${isEditMode ? styles.editMode : ''}`}>
      {isEditMode ? (
        <>
          <input
            className={styles.editor}
            type="text"
            ref={refEditor}
            value={editModeText}
            onBlur={onEditorBlur}
            onChange={onEditorChange}
            onKeyDown={onEditorKeyDown}
          />
          {!isEditModeTextValid(state) && (
            <div className={styles.invalidHint}>
              The input time doesn't match the expected format which is '{DIGITAL_TEXT_FORMAT}'.
            </div>
          )}
        </>
      ) : (
        <div onClick={onDisplayClick}>{displayText}</div>
      )}
    </div>
  );
};

/* 77ed362/src/CompositeClock/DigitalView.module.css */
.root {
  border: 1px solid black;
  width: 200px;
  line-height: 30px;
  text-align: center;
}

.editor {
  width: 100%;
  text-align: center;
  font-size: inherit;
  padding: 0;
  border: none;
  outline: none;
}

.invalidHint {
  line-height: 1.2;
}

.editMode.root {
  outline: 2px solid skyblue;
}

// 77ed362/src/CompositeClock/CompositeView.tsx
import { FC, useCallback, useEffect, useRef } from 'react';
import { useAppDispatch, useAppSelector, useAppStore } from '../reduxHooks';
import { AnalogueView } from './AnalogueView';
import styles from './CompositeView.module.css';
import { DigitalView } from './DigitalView';
import { changeTimestamp } from './TimeActions';

export const CompositeView: FC = () => {
  const dispatch = useAppDispatch();
  const store = useAppStore();
  const isEditModeInAnalogueClock = useAppSelector((appState) => appState.analogueClock.isEditMode);
  const isEditModeInDigitalClock = useAppSelector((appState) => appState.digitalClock.isEditMode);

  const calcTimestampCorrection = useCallback(
    () => store.getState().timeOfClock.timestamp - Date.now(),
    [store]
  );

  const refTimeCorrection = useRef<number>(calcTimestampCorrection());

  useEffect(() => {
    if (!isEditModeInAnalogueClock || !isEditModeInDigitalClock) {
      refTimeCorrection.current = calcTimestampCorrection();
    }
  }, [calcTimestampCorrection, isEditModeInAnalogueClock, isEditModeInDigitalClock]);

  useEffect(() => {
    const tickHandler = setInterval(
      () => dispatch(changeTimestamp(Date.now() + refTimeCorrection.current)),
      100
    );
    return () => clearInterval(tickHandler);
  }, [dispatch]);

  return (
    <div className={styles.root}>
      <AnalogueView />
      <DigitalView />
    </div>
  );
};

/* 77ed362/src/CompositeClock/CompositeView.module.css */
.root {
  margin: 16px 8px;
  font-size: 16px;
}

// 77ed362/src/CompositeClock/index.ts
export type { AnalogueAction } from './AnalogueActions';
export * from './AnalogueReducer';
+export { CompositeView as CompositeClock } from './CompositeView';
export type { DigitalAction } from './DigitalActions';
export * from './DigitalReducer';
export type { TimeAction } from './TimeActions';
export * from './TimeReducer';

// 77ed362/src/App.tsx
import { FC } from 'react';
+import { CompositeClock } from './CompositeClock';

const App: FC = () => {
-  return null;
+  return <CompositeClock />;
};

export default App;

Then, the example module built with Redux is complete. It can be previewed with the command npm start and its codebase is hosted at review-of-state-management-in-react/02-reducer-like-solutions-redux-and-its-family/77ed362.

Review of state management with Redux

In Redux, one-state changing logics are defined by reducers with optional simple actions. Because simple actions are only to pass payloads on to reducers, they have little weight on states changing. Because each reducer is a pure function that processes one state to return a new state of the one without any side effects, what one state a reducer changes can be clearly understood by only reading the reducer's function declaration, which makes one-state changing in Redux predictable without tracking logics in any function bodies. On the other hand, multi-state changing logics are defined by multi-state changing actions. To understand what states a multi-state changing action changes, what reducers the action involves needs to be tracked out by looking into function bodies of the action and other actions invoked by the action. But, unlike tracking state-changing events in MVC pattern, the tracking work in Redux actions is as easy as tracking plain constants and plain functions, which makes multi-state changing in Redux predictable at limited cost. It can be perceived by checking how TimeReducer.ts, AnalogueReducer.ts and DigitalReducer.ts and their actions work. Predictable one-state changing by only checking function declarations of reducers and predictable multi-state changing at limited cost of tracking involved reducers in function bodies of actions make up the brightest pro of Redux.

But, meanwhile, because building and maintaining a reducer always involve building and maintaining its actions and vise versa, a reducer and its actions are high-coupling, which brings difficulties in development, thus overall cost of development becomes high. Especially, when some actions of a reducer are dependent on the Redux setup for accessing the root store, the reducer, its actions and the Redux setup constitute circular dependency, so they need to be coded iteratively, thus the cost becomes even higher. High coupling between reducers and their actions leads to the biggest con of Redux.

Besides, a module built with Redux is actually not completely modularized by default, because when a module gets initialized for multiple instances, these instances are sharing exactly the same states in the app-wide Redux setup. To resolve this issue, a module-wide Redux setup needs to be introduced per module, which is costly in Redux. Incomplete modularization by default is another major con of Redux.

To sum up, doing state management with Redux achieves predictable states changing at limited cost of only tracking multi-state changing logics but at quite high overall cost of development.

Example module built with Redux Toolkit

Now that using Redux is costly, let me check out its next-generation solution, Redux Toolkit(RTK), whose goal is to decrease cost of development. As the view components in every example module built with a reducer-like solution would all be similarly coded and relate little to state management, I would not list them in the following sections but they can still be found in the hosted codebase.

Again, create-react-app is used to initialize the React app with the option --template typescript:

$ npx create-react-app 02-reducer-like-solutions-redux-and-its-family/d1b2fad --template typescript
# ...
$ cd 02-reducer-like-solutions-redux-and-its-family/d1b2fad

Then, src/App.tsx is cleared for later use, unused files are removed, the package of time helpers is installed:

// d1b2fad/src/App.tsx
import { FC } from 'react';

const App: FC = () => {
  return null;
};

export default App;

$ rm src/App.css src/App.test.tsx src/logo.svg

$ npm i date-fns

Then, to use RTK, @reduxjs/toolkit and react-redux are installed:

$ npm i @reduxjs/toolkit react-redux

RTK is a set of helpers simplifying logics in Redux to different levels. I would use the helpers that simplify the logics most to decrease the cost, so createSlice is used to simplify reducers and actions, and configureStore is used for the Redux setup. By a slice, it's an easily definable combination of a reducer with its one-state changing actions. And for advanced actions that access the root store and/or dispatch other actions, they can be coded following the usage of thunks and placed together with slices.

In terms of coding, slices are self-contained, advanced actions are dependent on the Redux setup for accessing the root store, the Redux setup is dependent on slices for building the root store. So, I would start from slices and evolve the rest parts afterwards.

The slices are coded as follows. Thinking of the advanced actions to be coded later, some one-state changing actions whose function names starting with _ are prepared ahead:

// d1b2fad/src/CompositeClock/TimeSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

export interface TimeState {
  timestamp: number;
}

const initialState: TimeState = {
  timestamp: 0,
};

const timeSlice = createSlice({
  name: 'COMPOSITE_CLOCK-TIME',
  initialState,
  reducers: {
    changeTimestamp(state, action: PayloadAction<number>) {
      state.timestamp = action.payload;
    },
  },
});

export const { changeTimestamp } = timeSlice.actions;

export const timeReducer = timeSlice.reducer;

// d1b2fad/src/CompositeClock/AnalogueSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const TWO_PI = 2 * Math.PI;

export interface AnalogueAngles {
  hour: number;
  minute: number;
  second: number;
}

export interface AnalogueState {
  isEditMode: boolean;
  editModeAngles: AnalogueAngles;
}

const initialState: AnalogueState = {
  isEditMode: false,
  editModeAngles: { hour: 0, minute: 0, second: 0 },
};

const analogueSlice = createSlice({
  name: 'COMPOSITE_CLOCK-ANALOGUE',
  initialState,
  reducers: {
    _enterEditMode(state, action: PayloadAction<AnalogueAngles>) {
      state.isEditMode = true;
      state.editModeAngles = action.payload;
    },

    _exitEditMode(state) {
      state.isEditMode = false;
    },

    changeEditModeMinuteAngle(state, action: PayloadAction<number>) {
      const minuteAngle = action.payload;
      state.editModeAngles.minute = (minuteAngle + TWO_PI) % TWO_PI;
      state.editModeAngles.hour =
        (Math.floor((state.editModeAngles.hour / TWO_PI) * 12) + minuteAngle / TWO_PI) *
        (TWO_PI / 12);
    },
  },
});

const { _enterEditMode, _exitEditMode } = analogueSlice.actions;

export const { changeEditModeMinuteAngle } = analogueSlice.actions;

export const analogueReducer = analogueSlice.reducer;

// d1b2fad/src/CompositeClock/DigitalSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

export const DIGITAL_TEXT_FORMAT = 'HH:mm:ss';

export interface DigitalState {
  isEditMode: boolean;
  editModeText: string;
}

const initialState: DigitalState = {
  isEditMode: false,
  editModeText: '',
};

const digitalSlice = createSlice({
  name: 'COMPOSITE_CLOCK-DIGITAL',
  initialState,
  reducers: {
    _enterEditMode(state, action: PayloadAction<string>) {
      state.isEditMode = true;
      state.editModeText = action.payload;
    },

    _exitEditMode(state) {
      state.isEditMode = false;
    },

    changeEditModeText(state, action: PayloadAction<string>) {
      state.editModeText = action.payload;
    },
  },
});

const { _enterEditMode, _exitEditMode } = digitalSlice.actions;

export const { changeEditModeText } = digitalSlice.actions;

export const digitalReducer = digitalSlice.reducer;

// d1b2fad/src/CompositeClock/index.ts
export { analogueReducer } from './AnalogueSlice';
export type { AnalogueState } from './AnalogueSlice';
export { digitalReducer } from './DigitalSlice';
export type { DigitalState } from './DigitalSlice';
export { timeReducer } from './TimeSlice';
export type { TimeState } from './TimeSlice';

Then, the Redux setup is coded as follows:

// d1b2fad/src/reduxStore.ts
import { AnyAction, configureStore } from '@reduxjs/toolkit';
import {
  analogueReducer,
  AnalogueState,
  digitalReducer,
  DigitalState,
  timeReducer,
  TimeState,
} from './CompositeClock';

export interface AppState {
  timeOfClock: TimeState;
  analogueClock: AnalogueState;
  digitalClock: DigitalState;
}

export function createAppStore(initialState: Partial<AppState> = {}) {
  const store = configureStore<AppState, AnyAction>({
    reducer: {
      timeOfClock: timeReducer,
      analogueClock: analogueReducer,
      digitalClock: digitalReducer,
    },
    preloadedState: initialState,
  });
  return store;
}

export type AppStore = ReturnType<typeof createAppStore>;

export type AppDispatch = AppStore['dispatch'];

export type AppThunk = (dispatch: AppDispatch, getState: () => AppState) => void;

// d1b2fad/src/reduxHooks.ts
import { AnyAction } from '@reduxjs/toolkit';
import { TypedUseSelectorHook, useDispatch, useSelector, useStore } from 'react-redux';
import type { AppDispatch, AppState } from './reduxStore';

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<AppState> = useSelector;
export const useAppStore = () => useStore<AppState, AnyAction>();

// d1b2fad/src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import App from './App';
import './index.css';
import { createAppStore } from './reduxStore';
import reportWebVitals from './reportWebVitals';

const appStore = createAppStore({
  timeOfClock: {
    timestamp: Date.now(),
  },
});

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <Provider store={appStore}>
      <App />
    </Provider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

And, the advanced actions and the selectors are coded as follows. The advanced actions would use the previously prepared one-state changing actions whose function names start with _:

// d1b2fad/src/CompositeClock/AnalogueSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import type { AppThunk } from '../reduxStore';
+import { changeTimestamp, TimeState } from './TimeSlice';

...

+export function enterEditMode(): AppThunk {
+  return (dispatch, getState) => {
+    const { timeOfClock, analogueClock } = getState();
+    if (analogueClock.isEditMode) return;
+    const editModeAngles = getDisplayAngles(timeOfClock);
+    dispatch(_enterEditMode(editModeAngles));
+  };
+}
+
+export function exitEditMode(submit: boolean = true): AppThunk {
+  return (dispatch, getState) => {
+    const { timeOfClock, analogueClock } = getState();
+    if (!analogueClock.isEditMode) return;
+    if (submit) {
+      const d = new Date(timeOfClock.timestamp);
+      d.setHours(
+        Math.floor((analogueClock.editModeAngles.hour / TWO_PI) * 12) +
+          12 * Math.floor(d.getHours() / 12)
+      );
+      d.setMinutes((analogueClock.editModeAngles.minute / TWO_PI) * 60);
+      d.setSeconds((analogueClock.editModeAngles.second / TWO_PI) * 60);
+      dispatch(changeTimestamp(d.getTime()));
+    }
+    dispatch(_exitEditMode());
+  };
+}
+
+export function getDisplayAngles(timeState: TimeState): AnalogueAngles {
+  const d = new Date(timeState.timestamp);
+  return {
+    hour: ((d.getHours() % 12) / 12) * TWO_PI + (d.getMinutes() / 60) * (TWO_PI / 12),
+    minute: (d.getMinutes() / 60) * TWO_PI + (d.getSeconds() / 60) * (TWO_PI / 60),
+    second: (d.getSeconds() / 60) * TWO_PI,
+  };
+}

// d1b2fad/src/CompositeClock/DigitalSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { format, isMatch, parse } from 'date-fns';
+import type { AppThunk } from '../reduxStore';
+import { changeTimestamp, TimeState } from './TimeSlice';

...

+export function enterEditMode(): AppThunk {
+  return (dispatch, getState) => {
+    const { timeOfClock, digitalClock } = getState();
+    if (digitalClock.isEditMode) return;
+    const editModeText = getDisplayText(timeOfClock);
+    dispatch(_enterEditMode(editModeText));
+  };
+}
+
+export function exitEditMode(submit: boolean = true): AppThunk {
+  return (dispatch, getState) => {
+    const { timeOfClock, digitalClock } = getState();
+    if (!digitalClock.isEditMode) return;
+    if (submit && isEditModeTextValid(digitalClock)) {
+      dispatch(
+        changeTimestamp(
+          parse(digitalClock.editModeText, DIGITAL_TEXT_FORMAT, timeOfClock.timestamp).getTime()
+        )
+      );
+    }
+    dispatch(_exitEditMode());
+  };
+}
+
+export function isEditModeTextValid(state: DigitalState): boolean {
+  return isMatch(state.editModeText, DIGITAL_TEXT_FORMAT);
+}
+
+export function getDisplayText(timeState: TimeState): string {
+  return format(timeState.timestamp, DIGITAL_TEXT_FORMAT);
+}

For the view components, along with the app, they can be found at review-of-state-management-in-react/02-reducer-like-solutions-redux-and-its-family/d1b2fad.

Review of state management with Redux Toolkit

In RTK, one-state changing logics are defined by slice functions. As a slice function is restricted to changing the one state represented by the slice, what one state a slice function changes can be clearly understood by only checking what one state the slice represents, which makes one-state changing in Redux predictable without tracking logics in any function bodies. On the other hand, multi-state changing logics are defined by multi-state changing actions. Likewise, to understand what states a multi-state changing action changes, what slice functions the action invokes needs to be tracked out by looking into function bodies of the action and other actions invoked by the action. But, the tracking work is as easy as tracking plain functions, which makes multi-state changing in RTK predictable at limited cost. Then, RKT has the same brightest pro as Redux does.

Meanwhile, because one-state changing actions in RTK are exported directly from slices, high coupling between reducer and their one-state changing actions in Redux gets eliminated is RTK. Though, because building and maintaining multi-state changing actions always involve building and maintaining underlying one-state changing actions exported from slices, multi-state changing actions and their underlying slices become high-coupling, which brings difficulties in development, thus overall cost of development becomes high. High coupling between slices and their multi-state changing actions leads to the biggest con of Redux.

Again, a module built with RTK is still not completely modularized by default and introducing a module-wide Redux setup is still costly in RTK. So, incomplete modularization by default is still another major con of RTK.

To sum up, doing state management with RTK achieves predictable states changing at limited cost of only tracking multi-state changing logics but at a bit high overall cost of development.

Example module built with Flux

RTK has done a lot to decrease cost of development but using it is still costly. The 2 cons, high coupling between reducers/slices and their actions and incomplete modularization by default, seem to be intrinsic characters of reducer-like solutions. To figure out how these cons come into being, I would take a look at Redux's parent solution, Flux.

Again, the React app is initialized with create-react-app --template typescript, src/App.tsx is cleared for later use, unused files are removed, the package of time helpers is installed:

$ npx create-react-app 02-reducer-like-solutions-redux-and-its-family/cdaed68 --template typescript
# ...
$ cd 02-reducer-like-solutions-redux-and-its-family/cdaed68

// cdaed68/src/App.tsx
import { FC } from 'react';

const App: FC = () => {
  return null;
};

export default App;

$ rm src/App.css src/App.test.tsx src/logo.svg

$ npm i date-fns

Then, to use Flux, flux is installed. Notice that, Flux has been in maintenance mode and is declared not to be compatible with the latest React(v18), so installing it requires the option --force:

$ npm i --force flux @types/flux

Also, some part of Flux is really not working with the latest React, so a helper createFunctional for Flux is introduced as a replacement of the broken part as follows:

// cdaed68/src/fluxHelpers.tsx
import type { Container } from 'flux/utils';
import React, { FC, useEffect, useState } from 'react';

export function createFunctional<TProps extends React.Attributes, TState>(
  TheFC: FC<TProps & TState>,
  getStores: () => Container.StoresList,
  getState: () => TState
): FC<TProps> {
  return (props) => {
    const [state, setState] = useState(getState());

    useEffect(() => {
      getStores().forEach((s) => s.addListener(() => setState(getState())));
    }, []);

    return <TheFC {...{ ...props, ...state }} />;
  };
}

Then, to match the 3 required states, there would be 3 stores with their actions, TimeStore.ts with TimeActions.ts, AnalogueStore.ts with AnalogueActions.ts, DigitalStore.ts with DigitalActions.ts. And, a dispatcher, ClockDispatcher.ts, is needed for dispatching actions to stores. For data deriving in Flux, it's achieved as a part of stores with the help of the dispatcher's waiting function.

In terms of coding, all stores are dependent on their actions for using the action types and some actions are dependent on stores for accessing states in them, which constitutes circular dependency in some cases. Meanwhile, all stores are dependent on the dispatcher for receiving actions and the dispatcher is dependent on all actions for declaring available actions. To get this coded, I would start from the dispatcher, then evolve the rest parts along with it step by step.

The dispatcher is initially coded as follows:

// cdaed68/src/CompositeClock/ClockDispatcher.ts
import { Dispatcher } from 'flux';

export type ClockAction = {};

export const clockDispatcher = new Dispatcher<ClockAction>();

The store with its actions for the state of time and the adjustment for the dispatcher are coded as follows:

// cdaed68/src/CompositeClock/TimeActions.ts
const NS = 'TIME';

export const ActionTypes = {
  CHANGE_TIMESTAMP: `${NS}-CHANGE_TIMESTAMP`,
} as const;

export type TimeAction = { type: typeof ActionTypes['CHANGE_TIMESTAMP']; timestamp: number };

export function changeTimestamp(timestamp: number): TimeAction {
  return {
    type: ActionTypes.CHANGE_TIMESTAMP,
    timestamp,
  };
}

// cdaed68/src/CompositeClock/ClockDispatcher.ts
import { Dispatcher } from 'flux';
+import type { TimeAction } from './TimeActions';

-export type ClockAction = {};
+export type ClockAction = TimeAction;

export const clockDispatcher = new Dispatcher<ClockAction>();

// cdaed68/src/CompositeClock/TimeStore.ts
import { ReduceStore } from 'flux/utils';
import { ClockAction, clockDispatcher } from './ClockDispatcher';
import { ActionTypes } from './TimeActions';

export interface TimeState {
  timestamp: number;
}

class TimeStore extends ReduceStore<TimeState, ClockAction> {
  constructor() {
    super(clockDispatcher);
  }

  getInitialState(): TimeState {
    return {
      timestamp: 0,
    };
  }

  reduce(state: TimeState, action: ClockAction): TimeState {
    switch (action.type) {
      case ActionTypes.CHANGE_TIMESTAMP:
        return { ...state, timestamp: action.timestamp };
    }
    return state;
  }
}

export const timeStore = new TimeStore();

The store with its actions for the state of the analogue clock and the adjustment for the dispatcher are coded as follows. Because AnalogueStore.ts and AnalogueActions.ts are dependent on each other and they constitue circle dependency, I would code the two iteratively:

// cdaed68/src/CompositeClock/AnalogueActions.ts
const NS = 'ANALOGUE';

export const ActionTypes = {
  ENTER_EDIT_MODE: `${NS}-ENTER_EDIT_MODE`,
  EXIT_EDIT_MODE: `${NS}-EXIT_EDIT_MODE`,
  CHANGE_EDIT_MODE_MINUTE_ANGLE: `${NS}-CHANGE_EDIT_MODE_MINUTE_ANGLE`,
} as const;

export type AnalogueAction =
  | { type: typeof ActionTypes['ENTER_EDIT_MODE'] }
  | { type: typeof ActionTypes['EXIT_EDIT_MODE'] }
  | { type: typeof ActionTypes['CHANGE_EDIT_MODE_MINUTE_ANGLE'] };

// cdaed68/src/CompositeClock/ClockDispatcher.ts
import { Dispatcher } from 'flux';
+import type { AnalogueAction } from './AnalogueActions';
import type { TimeAction } from './TimeActions';

-export type ClockAction = TimeAction;
+export type ClockAction = TimeAction | AnalogueAction;

export const clockDispatcher = new Dispatcher<ClockAction>();

// cdaed68/src/CompositeClock/AnalogueStore.ts
import { ReduceStore } from 'flux/utils';
import { ActionTypes } from './AnalogueActions';
import { ClockAction, clockDispatcher } from './ClockDispatcher';
import { ActionTypes as TimeActionTypes } from './TimeActions';
import { timeStore } from './TimeStore';

const TWO_PI = 2 * Math.PI;

export interface AnalogueAngles {
  hour: number;
  minute: number;
  second: number;
}

export interface AnalogueState {
  displayAngles: AnalogueAngles;
  isEditMode: boolean;
  editModeAngles: AnalogueAngles;
}

class AnalogueStore extends ReduceStore<AnalogueState, ClockAction> {
  constructor() {
    super(clockDispatcher);
  }

  getInitialState(): AnalogueState {
    const displayAngles = this.calcDisplayAngles();
    return {
      displayAngles,
      isEditMode: false,
      editModeAngles: displayAngles,
    };
  }

  reduce(state: AnalogueState, action: ClockAction): AnalogueState {
    switch (action.type) {
      case TimeActionTypes.CHANGE_TIMESTAMP:
        clockDispatcher.waitFor([timeStore.getDispatchToken()]);
        return { ...state, displayAngles: this.calcDisplayAngles() };

      case ActionTypes.ENTER_EDIT_MODE:
      case ActionTypes.EXIT_EDIT_MODE:
      case ActionTypes.CHANGE_EDIT_MODE_MINUTE_ANGLE:
    }
    return state;
  }

  calcDisplayAngles(): AnalogueAngles {
    const d = new Date(timeStore.getState().timestamp);
    return {
      hour: ((d.getHours() % 12) / 12) * TWO_PI + (d.getMinutes() / 60) * (TWO_PI / 12),
      minute: (d.getMinutes() / 60) * TWO_PI + (d.getSeconds() / 60) * (TWO_PI / 60),
      second: (d.getSeconds() / 60) * TWO_PI,
    };
  }
}

export const analogueStore = new AnalogueStore();

// cdaed68/src/CompositeClock/AnalogueActions.ts
+import { analogueStore } from './AnalogueStore';
+import { clockDispatcher } from './ClockDispatcher';
+import { changeTimestamp } from './TimeActions';
+import { timeStore } from './TimeStore';
+
+const TWO_PI = 2 * Math.PI;
+
const NS = 'ANALOGUE';

export const ActionTypes = {
  ENTER_EDIT_MODE: `${NS}-ENTER_EDIT_MODE`,
  EXIT_EDIT_MODE: `${NS}-EXIT_EDIT_MODE`,
  CHANGE_EDIT_MODE_MINUTE_ANGLE: `${NS}-CHANGE_EDIT_MODE_MINUTE_ANGLE`,
} as const;

export type AnalogueAction =
  | { type: typeof ActionTypes['ENTER_EDIT_MODE'] }
  | { type: typeof ActionTypes['EXIT_EDIT_MODE'] }
-  | { type: typeof ActionTypes['CHANGE_EDIT_MODE_MINUTE_ANGLE'] };
+  | { type: typeof ActionTypes['CHANGE_EDIT_MODE_MINUTE_ANGLE']; minuteAngle: number };
+
+export function dispatchEnterEditMode(): void {
+  if (analogueStore.getState().isEditMode) return;
+  clockDispatcher.dispatch({ type: ActionTypes.ENTER_EDIT_MODE });
+}
+
+export function dispatchExitEditMode(submit: boolean = true): void {
+  const analogueState = analogueStore.getState();
+  if (!analogueState.isEditMode) return;
+  if (submit) {
+    const d = new Date(timeStore.getState().timestamp);
+    d.setHours(
+      Math.floor((analogueState.editModeAngles.hour / TWO_PI) * 12) +
+        12 * Math.floor(d.getHours() / 12)
+    );
+    d.setMinutes((analogueState.editModeAngles.minute / TWO_PI) * 60);
+    d.setSeconds((analogueState.editModeAngles.second / TWO_PI) * 60);
+    clockDispatcher.dispatch(changeTimestamp(d.getTime()));
+  }
+  clockDispatcher.dispatch({ type: ActionTypes.EXIT_EDIT_MODE });
+}
+
+export function changeEditModeMinuteAngle(minuteAngle: number): AnalogueAction {
+  return { type: ActionTypes.CHANGE_EDIT_MODE_MINUTE_ANGLE, minuteAngle };
+}

// cdaed68/src/CompositeClock/AnalogueStore.ts
...

class AnalogueStore extends ReduceStore<AnalogueState, ClockAction> {
  ...

  reduce(state: AnalogueState, action: ClockAction): AnalogueState {
    switch (action.type) {
      case TimeActionTypes.CHANGE_TIMESTAMP:
        clockDispatcher.waitFor([timeStore.getDispatchToken()]);
        return { ...state, displayAngles: this.calcDisplayAngles() };

      case ActionTypes.ENTER_EDIT_MODE:
+        return { ...state, isEditMode: true, editModeAngles: state.displayAngles };
      case ActionTypes.EXIT_EDIT_MODE:
+        return { ...state, isEditMode: false };
      case ActionTypes.CHANGE_EDIT_MODE_MINUTE_ANGLE:
+        return {
+          ...state,
+          editModeAngles: {
+            ...state.editModeAngles,
+            minute: (action.minuteAngle + TWO_PI) % TWO_PI,
+            hour:
+              (Math.floor((state.editModeAngles.hour / TWO_PI) * 12) +
+                action.minuteAngle / TWO_PI) *
+              (TWO_PI / 12),
+          },
+        };
    }
    return state;
  }

  ...
}

...

The store with its actions for the state of the digital clock and the adjustment for the dispatcher are coded as follows. Because DigitalStore.ts and DigitalActions.ts are dependent on each other and they constitue circle dependency, I would code the two iteratively:

// cdaed68/src/CompositeClock/DigitalActions.ts
const NS = 'DIGITAL';

export const ActionTypes = {
  ENTER_EDIT_MODE: `${NS}-ENTER_EDIT_MODE`,
  EXIT_EDIT_MODE: `${NS}-EXIT_EDIT_MODE`,
  CHANGE_EDIT_MODE_TEXT: `${NS}-CHANGE_EDIT_MODE_TEXT`,
} as const;

export type DigitalAction =
  | { type: typeof ActionTypes['ENTER_EDIT_MODE'] }
  | { type: typeof ActionTypes['EXIT_EDIT_MODE'] }
  | { type: typeof ActionTypes['CHANGE_EDIT_MODE_TEXT'] };

// cdaed68/src/CompositeClock/ClockDispatcher.ts
import { Dispatcher } from 'flux';
import type { AnalogueAction } from './AnalogueActions';
+import type { DigitalAction } from './DigitalActions';
import type { TimeAction } from './TimeActions';

-export type ClockAction = TimeAction | AnalogueAction;
+export type ClockAction = TimeAction | AnalogueAction | DigitalAction;

export const clockDispatcher = new Dispatcher<ClockAction>();

// cdaed68/src/CompositeClock/DigitalStore.ts
import { format, isMatch } from 'date-fns';
import { ReduceStore } from 'flux/utils';
import { ClockAction, clockDispatcher } from './ClockDispatcher';
import { ActionTypes } from './DigitalActions';
import { ActionTypes as TimeActionTypes } from './TimeActions';
import { timeStore } from './TimeStore';

export interface DigitalState {
  displayText: string;
  isEditMode: boolean;
  editModeText: string;
}

export class DigitalStore extends ReduceStore<DigitalState, ClockAction> {
  static readonly FORMAT = 'HH:mm:ss';

  constructor() {
    super(clockDispatcher);
  }

  getInitialState(): DigitalState {
    const displayText = this.calcDisplayText();
    return {
      displayText,
      isEditMode: false,
      editModeText: displayText,
    };
  }

  reduce(state: DigitalState, action: ClockAction): DigitalState {
    switch (action.type) {
      case TimeActionTypes.CHANGE_TIMESTAMP:
        clockDispatcher.waitFor([timeStore.getDispatchToken()]);
        return { ...state, displayText: this.calcDisplayText() };

      case ActionTypes.ENTER_EDIT_MODE:
      case ActionTypes.EXIT_EDIT_MODE:
      case ActionTypes.CHANGE_EDIT_MODE_TEXT:
    }
    return state;
  }

  calcDisplayText(): string {
    return format(timeStore.getState().timestamp, DigitalStore.FORMAT);
  }

  isEditModeTextValid(): boolean {
    return isMatch(this.getState().editModeText, DigitalStore.FORMAT);
  }
}

export const digitalStore = new DigitalStore();

// cdaed68/src/CompositeClock/DigitalActions.ts
+import { parse } from 'date-fns';
+import { clockDispatcher } from './ClockDispatcher';
+import { DigitalStore, digitalStore } from './DigitalStore';
+import { changeTimestamp } from './TimeActions';
+import { timeStore } from './TimeStore';
+
const NS = 'DIGITAL';

export const ActionTypes = {
  ENTER_EDIT_MODE: `${NS}-ENTER_EDIT_MODE`,
  EXIT_EDIT_MODE: `${NS}-EXIT_EDIT_MODE`,
  CHANGE_EDIT_MODE_TEXT: `${NS}-CHANGE_EDIT_MODE_TEXT`,
} as const;

export type DigitalAction =
  | { type: typeof ActionTypes['ENTER_EDIT_MODE'] }
  | { type: typeof ActionTypes['EXIT_EDIT_MODE'] }
-  | { type: typeof ActionTypes['CHANGE_EDIT_MODE_TEXT'] };
+  | { type: typeof ActionTypes['CHANGE_EDIT_MODE_TEXT']; editModeText: string };
+
+export function dispatchEnterEditMode(): void {
+  if (digitalStore.getState().isEditMode) return;
+  clockDispatcher.dispatch({ type: ActionTypes.ENTER_EDIT_MODE });
+}
+
+export function dispatchExitEditMode(submit: boolean = true): void {
+  const digitalState = digitalStore.getState();
+  if (!digitalState.isEditMode) return;
+  if (submit && digitalStore.isEditModeTextValid()) {
+    clockDispatcher.dispatch(
+      changeTimestamp(
+        parse(
+          digitalState.editModeText,
+          DigitalStore.FORMAT,
+          timeStore.getState().timestamp
+        ).getTime()
+      )
+    );
+  }
+  clockDispatcher.dispatch({ type: ActionTypes.EXIT_EDIT_MODE });
+}
+
+export function changeEditModeText(editModeText: string): DigitalAction {
+  return { type: ActionTypes.CHANGE_EDIT_MODE_TEXT, editModeText };
+}

// cdaed68/src/CompositeClock/DigitalStore.ts
...

export class DigitalStore extends ReduceStore<DigitalState, ClockAction> {
  ...

  reduce(state: DigitalState, action: ClockAction): DigitalState {
    switch (action.type) {
      case TimeActionTypes.CHANGE_TIMESTAMP:
        clockDispatcher.waitFor([timeStore.getDispatchToken()]);
        return { ...state, displayText: this.calcDisplayText() };

      case ActionTypes.ENTER_EDIT_MODE:
+        return { ...state, isEditMode: true, editModeText: state.displayText };
      case ActionTypes.EXIT_EDIT_MODE:
+        return { ...state, isEditMode: false };
      case ActionTypes.CHANGE_EDIT_MODE_TEXT:
+        return { ...state, editModeText: action.editModeText };
    }
    return state;
  }

  ...
}

...

To nicely override initial states, I would declare a getter of the initial states getInitialClockState and its return type aside the dispatcher, then adjust getInitialState of the stores to use it:

// cdaed68/src/CompositeClock/ClockDispatcher.ts
import { Dispatcher } from 'flux';
import type { AnalogueAction } from './AnalogueActions';
+import type { AnalogueState } from './AnalogueStore';
import type { DigitalAction } from './DigitalActions';
+import type { DigitalState } from './DigitalStore';
import type { TimeAction } from './TimeActions';
+import type { TimeState } from './TimeStore';

export type ClockAction = TimeAction | AnalogueAction | DigitalAction;

+export interface ClockState {
+  time: TimeState;
+  analogue: AnalogueState;
+  digital: DigitalState;
+}
+
+export function getInitialClockState(): Partial<ClockState> {
+  return {
+    time: {
+      timestamp: Date.now(),
+    },
+  };
+}
+
export const clockDispatcher = new Dispatcher<ClockAction>();

// cdaed68/src/CompositeClock/TimeStore.ts
import { ReduceStore } from 'flux/utils';
-import { ClockAction, clockDispatcher } from './ClockDispatcher';
+import { ClockAction, clockDispatcher, getInitialClockState } from './ClockDispatcher';
import { ActionTypes } from './TimeActions';

...

class TimeStore extends ReduceStore<TimeState, ClockAction> {
  ...

  getInitialState(): TimeState {
-    return {
-      timestamp: 0,
-    };
+    return (
+      getInitialClockState().time ?? {
+        timestamp: 0,
+      }
+    );
  }

  ...
}

...

// cdaed68/src/CompositeClock/AnalogueStore.ts
import { ReduceStore } from 'flux/utils';
import { ActionTypes } from './AnalogueActions';
-import { ClockAction, clockDispatcher } from './ClockDispatcher';
+import { ClockAction, clockDispatcher, getInitialClockState } from './ClockDispatcher';
import { ActionTypes as TimeActionTypes } from './TimeActions';
import { timeStore } from './TimeStore';

...

class AnalogueStore extends ReduceStore<AnalogueState, ClockAction> {
  ...

  getInitialState(): AnalogueState {
    const displayAngles = this.calcDisplayAngles();
-    return {
-      displayAngles,
-      isEditMode: false,
-      editModeAngles: displayAngles,
-    };
+    return (
+      getInitialClockState().analogue ?? {
+        displayAngles,
+        isEditMode: false,
+        editModeAngles: displayAngles,
+      }
+    );
  }

  ...
}

...

// cdaed68/src/CompositeClock/DigitalStore.ts
import { format, isMatch } from 'date-fns';
import { ReduceStore } from 'flux/utils';
-import { ClockAction, clockDispatcher } from './ClockDispatcher';
+import { ClockAction, clockDispatcher, getInitialClockState } from './ClockDispatcher';
import { ActionTypes } from './DigitalActions';
import { ActionTypes as TimeActionTypes } from './TimeActions';
import { timeStore } from './TimeStore';

...

export class DigitalStore extends ReduceStore<DigitalState, ClockAction> {
  ...

  getInitialState(): DigitalState {
    const displayText = this.calcDisplayText();
-    return {
-      displayText,
-      isEditMode: false,
-      editModeText: displayText,
-    };
+    return (
+      getInitialClockState().digital ?? {
+        displayText,
+        isEditMode: false,
+        editModeText: displayText,
+      }
+    );
  }

  ...
}

...

For the view components, along with the app, they can be found at review-of-state-management-in-react/02-reducer-like-solutions-redux-and-its-family/cdaed68. For a convenient reference, the use of createFunctional is listed as follows:

// cdaed68/src/CompositeClock/CompositeView.tsx
...

export const CompositeView = createFunctional<Props, ClockState>(
  ({ analogue, digital }) => {

    ...

  },
  () => [timeStore, analogueStore, digitalStore],
  () => ({
    time: timeStore.getState(),
    analogue: analogueStore.getState(),
    digital: digitalStore.getState(),
  })
);

Review of state management with Flux

In terms of state management, the only difference between Flux and Redux is, Flux uses stores with reducers included for both one-state changing and data deriving, but Redux uses reducers for one-state changing and selectors for data deriving seperately. The 2 cons of high coupling between reducers and their actions as well as incomplete modularization by default exist in both Flux and Redux, which is very possibly because Redux is evolved from Flux. But does that mean the 2 cons are intrinsic characters of reducer-like solutions? With this question, let me take a look a bit closely.

About high coupling, is a reducer necessarily high-coupling with its actions? What if a reducer processing multiple kinds of actions can be split into multiple reducers processing only one kind of actions? Then, plain payloads of reducers would take the place of actions, so high coupling disappears. A potential challenge can be how to get multi-state changing logics defined by a reducer that handles only one kind of actions, but I don't think it's unresolveable. This assumption indicates, only when a reducer-like solution treats a reducer as a binary operator that processes more than one kind of actions, the reducer would be high-coupling with its actions. As all Redux faimly members are designed in this way but some other ways of designing reducer-like solutions are still possible, high coupling is only an intrinsic character of Redux family but not that of reducer-like solutions.

About incomplete modularization, are states necessarily organized as app-wide ones by default? What if states are organized as module-wide ones by default or there is support to organize states as module-wide ones at low cost? Then, modularization becomes complete. This assumption indicates, only when a reducer-like solution organizes states as app-wide ones by default and doesn't provide good support or module-wide ones, incomplete modularization prones to happen. As some Redux family member like useReducer is not designed in this way, incomplete modularization is not intrinsic character of either Redux family or reducer-like solutions.

Example module built with `useReducer`

Next, to continue getting a comprehensive understanding of Redux family, let me check out the React's built-in hook useReducer. Because useReducer is evolved from both Flux and Redux but was born after Redux, I would like to regard it as Redux's nephew.

Again, the React app is initialized with create-react-app --template typescript, src/App.tsx is cleared for later use, unused files are removed, the package of time helpers is installed:

$ npx create-react-app 02-reducer-like-solutions-redux-and-its-family/e6ed1b5 --template typescript
# ...
$ cd 02-reducer-like-solutions-redux-and-its-family/e6ed1b5

// e6ed1b5/src/App.tsx
import { FC } from 'react';

const App: FC = () => {
  return null;
};

export default App;

$ rm src/App.css src/App.test.tsx src/logo.svg

$ npm i date-fns

The hook useReducer only manages component-wide states by its original design. To get component-wide states hoisted as module-wide ones, the following helper contextualizeUseReducer is introduced:

// e6ed1b5/src/reducerHelpers.tsx
import {
  createContext,
  Dispatch,
  FC,
  PropsWithChildren,
  useCallback,
  useContext,
  useLayoutEffect,
  useRef,
} from 'react';

export interface ReturnOfContextualizeUseReducer<TState, TAction> {
  TheStateProvider: FC<TheStateProviderProps<TState>>;
  useTheReducer: () => [TState, Dispatch<TAction>];
  useTheStateGetter: () => () => TState;
}

export interface TheStateProviderProps<TState> extends PropsWithChildren {
  initialStateOverride?: TState;
}

export function contextualizeUseReducer<TState, TAction>(
  useRawReducer: (initialState?: TState) => [TState, Dispatch<TAction>]
): ReturnOfContextualizeUseReducer<TState, TAction> {
  const ReducerContext = createContext<[state: TState, dispatch: Dispatch<TAction>] | null>(null);

  const StateGetterContext = createContext<(() => TState) | null>(null);

  const TheStateProvider: FC<TheStateProviderProps<TState>> = ({
    children,
    initialStateOverride,
  }) => {
    const retRawReducer = useRawReducer(initialStateOverride);
    const [state] = retRawReducer;

    const refState = useRef(state);

    const getState = useCallback(() => refState.current, []);

    useLayoutEffect(() => {
      refState.current = state;
    }, [state]);

    return (
      <ReducerContext.Provider value={retRawReducer}>
        <StateGetterContext.Provider value={getState}>{children}</StateGetterContext.Provider>
      </ReducerContext.Provider>
    );
  };

  const useTheReducer = () => {
    const value = useContext(ReducerContext);
    if (!value) {
      throw new Error('ReducerContext not found');
    }
    return value;
  };

  const useTheStateGetter = () => {
    const value = useContext(StateGetterContext);
    if (!value) {
      throw new Error('StateGetterContext not found');
    }
    return value;
  };

  return {
    TheStateProvider,
    useTheReducer,
    useTheStateGetter,
  };
}

Additionally, when some useCallback wrapped function in a view component needs to access a state, it can use the state getter instead of the state directly to avoid getting itself regenerated on rerendered so to avoid performance issues to some degree. Though, a small problem of the state getter is, it can't access the latest state value immediately after an action is dispatched because the state accessed by the getter only gets refreshed on rerendered.

The general thought of the implementation with useReducer is almost the same as that with Redux except that an app-wide setup is not needed.

The reducer with its actions for the state of time is coded as follows:

// e6ed1b5/src/CompositeClock/TimeActions.ts
export const ActionTypes = {
  CHANGE_TIMESTAMP: 'CHANGE_TIMESTAMP',
} as const;

export type TimeAction = { type: typeof ActionTypes['CHANGE_TIMESTAMP']; timestamp: number };

export function changeTimestamp(timestamp: number): TimeAction {
  return {
    type: ActionTypes.CHANGE_TIMESTAMP,
    timestamp,
  };
}

// e6ed1b5/src/CompositeClock/TimeReducer.ts
import { useReducer } from 'react';
import { contextualizeUseReducer } from '../reducerHelpers';
import { ActionTypes, TimeAction } from './TimeActions';

export interface TimeState {
  timestamp: number;
}

const initialState: TimeState = {
  timestamp: 0,
};

function timeReducer(state: TimeState, action: TimeAction): TimeState {
  switch (action.type) {
    case ActionTypes.CHANGE_TIMESTAMP:
      return { ...state, timestamp: action.timestamp };
  }
  return state;
}

const useRawTimeReducer = (initialStateOverride?: TimeState) =>
  useReducer(timeReducer, initialStateOverride ?? initialState);

export const {
  TheStateProvider: TimeStateProvider,
  useTheReducer: useTimeReducer,
  useTheStateGetter: useTimeStateGetter,
} = contextualizeUseReducer(useRawTimeReducer);

The reducer with its actions for the state of the analogue clock is coded as follows. Because AnalogueReducer.ts and AnalogueActions.ts are dependent on each other and they constitue circle dependency, I would code the two iteratively:

// e6ed1b5/src/CompositeClock/AnalogueActions.ts
export const ActionTypes = {
  ENTER_EDIT_MODE: 'ENTER_EDIT_MODE',
  EXIT_EDIT_MODE: 'EXIT_EDIT_MODE',
  CHANGE_EDIT_MODE_MINUTE_ANGLE: 'CHANGE_EDIT_MODE_MINUTE_ANGLE',
} as const;

export type AnalogueAction =
  | { type: typeof ActionTypes['ENTER_EDIT_MODE'] }
  | { type: typeof ActionTypes['EXIT_EDIT_MODE'] }
  | { type: typeof ActionTypes['CHANGE_EDIT_MODE_MINUTE_ANGLE'] };

// e6ed1b5/src/CompositeClock/AnalogueReducer.ts
import { useReducer } from 'react';
import { contextualizeUseReducer } from '../reducerHelpers';
import { ActionTypes, AnalogueAction } from './AnalogueActions';
import type { TimeState } from './TimeReducer';

const TWO_PI = 2 * Math.PI;

export interface AnalogueAngles {
  hour: number;
  minute: number;
  second: number;
}

export interface AnalogueState {
  isEditMode: boolean;
  editModeAngles: AnalogueAngles;
}

const initialState: AnalogueState = {
  isEditMode: false,
  editModeAngles: { hour: 0, minute: 0, second: 0 },
};

function reducer(state: AnalogueState, action: AnalogueAction): AnalogueState {
  switch (action.type) {
    case ActionTypes.ENTER_EDIT_MODE:
    case ActionTypes.EXIT_EDIT_MODE:
    case ActionTypes.CHANGE_EDIT_MODE_MINUTE_ANGLE:
  }
  return state;
}

const useRawReducer = () => useReducer(reducer, initialState);

export const {
  TheStateProvider: AnalogueStateProvider,
  useTheReducer: useAnalogueReducer,
  useTheStateGetter: useAnalogueStateGetter,
} = contextualizeUseReducer(useRawReducer);

export function getDisplayAngles(timeState: TimeState): AnalogueAngles {
  const d = new Date(timeState.timestamp);
  return {
    hour: ((d.getHours() % 12) / 12) * TWO_PI + (d.getMinutes() / 60) * (TWO_PI / 12),
    minute: (d.getMinutes() / 60) * TWO_PI + (d.getSeconds() / 60) * (TWO_PI / 60),
    second: (d.getSeconds() / 60) * TWO_PI,
  };
}

// e6ed1b5/src/CompositeClock/AnalogueActions.ts
+import { Dispatch } from 'react';
+import { AnalogueAngles, AnalogueState, getDisplayAngles } from './AnalogueReducer';
+import { changeTimestamp, TimeAction } from './TimeActions';
+import type { TimeState } from './TimeReducer';
+
+const TWO_PI = 2 * Math.PI;
+
export const ActionTypes = {
  ENTER_EDIT_MODE: 'ENTER_EDIT_MODE',
  EXIT_EDIT_MODE: 'EXIT_EDIT_MODE',
  CHANGE_EDIT_MODE_MINUTE_ANGLE: 'CHANGE_EDIT_MODE_MINUTE_ANGLE',
} as const;

export type AnalogueAction =
-  | { type: typeof ActionTypes['ENTER_EDIT_MODE'] }
+  | { type: typeof ActionTypes['ENTER_EDIT_MODE']; editModeAngles: AnalogueAngles }
  | { type: typeof ActionTypes['EXIT_EDIT_MODE'] }
-  | { type: typeof ActionTypes['CHANGE_EDIT_MODE_MINUTE_ANGLE'] };
+  | { type: typeof ActionTypes['CHANGE_EDIT_MODE_MINUTE_ANGLE']; minuteAngle: number };
+
+export function dispatchEnterEditMode(
+  getState: () => AnalogueState,
+  dispatch: Dispatch<AnalogueAction>,
+  getTimeState: () => TimeState
+): void {
+  if (getState().isEditMode) return;
+  const editModeAngles = getDisplayAngles(getTimeState());
+  dispatch({
+    type: ActionTypes.ENTER_EDIT_MODE,
+    editModeAngles,
+  });
+}
+
+export function dispatchExitEditMode(
+  getState: () => AnalogueState,
+  dispatch: Dispatch<AnalogueAction>,
+  getTimeState: () => TimeState,
+  dispatchTime: Dispatch<TimeAction>,
+  submit: boolean = true
+): void {
+  if (!getState().isEditMode) return;
+  if (submit) {
+    const d = new Date(getTimeState().timestamp);
+    d.setHours(
+      Math.floor((getState().editModeAngles.hour / TWO_PI) * 12) +
+        12 * Math.floor(d.getHours() / 12)
+    );
+    d.setMinutes((getState().editModeAngles.minute / TWO_PI) * 60);
+    d.setSeconds((getState().editModeAngles.second / TWO_PI) * 60);
+    dispatchTime(changeTimestamp(d.getTime()));
+  }
+  dispatch({ type: ActionTypes.EXIT_EDIT_MODE });
+}
+
+export function changeEditModeMinuteAngle(minuteAngle: number): AnalogueAction {
+  return { type: ActionTypes.CHANGE_EDIT_MODE_MINUTE_ANGLE, minuteAngle };
+}

// e6ed1b5/src/CompositeClock/AnalogueReducer.ts
...

function reducer(state: AnalogueState, action: AnalogueAction): AnalogueState {
  switch (action.type) {
    case ActionTypes.ENTER_EDIT_MODE:
+      return { ...state, isEditMode: true, editModeAngles: action.editModeAngles };
    case ActionTypes.EXIT_EDIT_MODE:
+      return { ...state, isEditMode: false };
    case ActionTypes.CHANGE_EDIT_MODE_MINUTE_ANGLE:
+      return {
+        ...state,
+        editModeAngles: {
+          ...state.editModeAngles,
+          minute: (action.minuteAngle + TWO_PI) % TWO_PI,
+          hour:
+            (Math.floor((state.editModeAngles.hour / TWO_PI) * 12) + action.minuteAngle / TWO_PI) *
+            (TWO_PI / 12),
+        },
+      };
  }
  return state;
}

...

The reducer with its actions for the state of the digital clock is coded as follows. Because DigitalStore.ts and DigitalActions.ts are dependent on each other and they constitue circle dependency, I would code the two iteratively:

// e6ed1b5/src/CompositeClock/DigitalActions.ts
export const ActionTypes = {
  ENTER_EDIT_MODE: 'ENTER_EDIT_MODE',
  EXIT_EDIT_MODE: 'EXIT_EDIT_MODE',
  CHANGE_EDIT_MODE_TEXT: 'CHANGE_EDIT_MODE_TEXT',
} as const;

export type DigitalAction =
  | { type: typeof ActionTypes['ENTER_EDIT_MODE'] }
  | { type: typeof ActionTypes['EXIT_EDIT_MODE'] }
  | { type: typeof ActionTypes['CHANGE_EDIT_MODE_TEXT'] };

// e6ed1b5/src/CompositeClock/DigitalReducer.ts
import { format, isMatch } from 'date-fns';
import { useReducer } from 'react';
import { contextualizeUseReducer } from '../reducerHelpers';
import { ActionTypes, DigitalAction } from './DigitalActions';
import type { TimeState } from './TimeReducer';

export interface DigitalState {
  isEditMode: boolean;
  editModeText: string;
}

export const DIGITAL_TEXT_FORMAT = 'HH:mm:ss';

const initialState: DigitalState = {
  isEditMode: false,
  editModeText: '',
};

function reducer(state: DigitalState, action: DigitalAction): DigitalState {
  switch (action.type) {
    case ActionTypes.ENTER_EDIT_MODE:
    case ActionTypes.EXIT_EDIT_MODE:
    case ActionTypes.CHANGE_EDIT_MODE_TEXT:
  }
  return state;
}

const useRawReducer = () => useReducer(reducer, initialState);

export const {
  TheStateProvider: DigitalStateProvider,
  useTheReducer: useDigitalReducer,
  useTheStateGetter: useDigitalStateGetter,
} = contextualizeUseReducer(useRawReducer);

export function isEditModeTextValid(state: DigitalState): boolean {
  return isMatch(state.editModeText, DIGITAL_TEXT_FORMAT);
}

export function getDisplayText(timeState: TimeState): string {
  return format(timeState.timestamp, DIGITAL_TEXT_FORMAT);
}

// e6ed1b5/src/CompositeClock/DigitalActions.ts
+import { parse } from 'date-fns';
+import { Dispatch } from 'react';
+import {
+  DigitalState,
+  DIGITAL_TEXT_FORMAT,
+  getDisplayText,
+  isEditModeTextValid,
+} from './DigitalReducer';
+import { changeTimestamp, TimeAction } from './TimeActions';
+import type { TimeState } from './TimeReducer';
+
export const ActionTypes = {
  ENTER_EDIT_MODE: 'ENTER_EDIT_MODE',
  EXIT_EDIT_MODE: 'EXIT_EDIT_MODE',
  CHANGE_EDIT_MODE_TEXT: 'CHANGE_EDIT_MODE_TEXT',
} as const;

export type DigitalAction =
-  | { type: typeof ActionTypes['ENTER_EDIT_MODE'] }
+  | { type: typeof ActionTypes['ENTER_EDIT_MODE']; editModeText: string }
  | { type: typeof ActionTypes['EXIT_EDIT_MODE'] }
-  | { type: typeof ActionTypes['CHANGE_EDIT_MODE_TEXT'] };
+  | { type: typeof ActionTypes['CHANGE_EDIT_MODE_TEXT']; editModeText: string };
+
+export function dispatchEnterEditMode(
+  getState: () => DigitalState,
+  dispatch: Dispatch<DigitalAction>,
+  getTimeState: () => TimeState
+): void {
+  if (getState().isEditMode) return;
+  const editModeText = getDisplayText(getTimeState());
+  dispatch({
+    type: ActionTypes.ENTER_EDIT_MODE,
+    editModeText,
+  });
+}
+
+export function dispatchExitEditMode(
+  getState: () => DigitalState,
+  dispatch: Dispatch<DigitalAction>,
+  getTimeState: () => TimeState,
+  dispatchTime: Dispatch<TimeAction>,
+  submit: boolean = true
+): void {
+  if (!getState().isEditMode) return;
+  if (submit && isEditModeTextValid(getState())) {
+    dispatchTime(
+      changeTimestamp(
+        parse(getState().editModeText, DIGITAL_TEXT_FORMAT, getTimeState().timestamp).getTime()
+      )
+    );
+  }
+  dispatch({ type: ActionTypes.EXIT_EDIT_MODE });
+}
+
+export function changeEditModeText(editModeText: string): DigitalAction {
+  return { type: ActionTypes.CHANGE_EDIT_MODE_TEXT, editModeText };
+}

// e6ed1b5/src/CompositeClock/DigitalReducer.ts
...

function reducer(state: DigitalState, action: DigitalAction): DigitalState {
  switch (action.type) {
    case ActionTypes.ENTER_EDIT_MODE:
+      return { ...state, isEditMode: true, editModeText: action.editModeText };
    case ActionTypes.EXIT_EDIT_MODE:
+      return { ...state, isEditMode: false };
    case ActionTypes.CHANGE_EDIT_MODE_TEXT:
+      return { ...state, editModeText: action.editModeText };
  }
  return state;
}

...

For the view components, along with the app, they can be found at review-of-state-management-in-react/02-reducer-like-solutions-redux-and-its-family/e6ed1b5. For a convenient reference, the use of the state providers is listed as follows:

// e6ed1b5/src/CompositeClock/CompositeView.tsx
...

export const CompositeView: FC = () => {
  ...
};

export const CompositeClock: FC = () => {
  return (
    <TimeStateProvider
      initialStateOverride={{
        timestamp: Date.now(),
      }}
    >
      <AnalogueStateProvider>
        <DigitalStateProvider>
          <CompositeView />
        </DigitalStateProvider>
      </AnalogueStateProvider>
    </TimeStateProvider>
  );
};

Review of state management with `useReducer`

In terms of state management, the only differences between useReducer and Redux are, (1) useReducer only manages component-wide states by its original design, so building a helper to get component-wide states hoisted as module-wide ones is needed, (2) states in useReducer only get refreshed on rerendered, so latest states can't be accessed immediately after an action payload is dispatched, thus write-read state-changing logics can't be coded. Hence, useReducer has the same pros as Redux does but has cons of high coupling between reducers and actions and inability of write-read state-changing logics.

To sum up, doing state management with useReducer achieves predictable states changing at limited cost of only tracking multi-state changing logics but at high overall cost of development and with inability of write-read state-changing logics.

Summary for reducer-like solutions

After getting the example module, the composite clock, rebuilt with the 4 Redux family members, Redux, RTK, Flux and useReducer, it can be concluded that Redux family achieves predictable states changing at limited cost of only tracking multi-state changing logics but at high overall cost of development. Because one-state changing logics are defined by reducers or slice functions and what one state a reducer or a slice function changes can be clearly understood by only taking a look at the reducer's function declaration or what one state the slice represents, one-state changing in Redux family becomes predictable without tracking logics in any function bodies. Because multi-state changing logics are defined by multi-state changing actions and looking into function bodies of a multi-state changing action and other actions invoked by the action to track out what reducers or slice functions it involves or invoke is as easy as tracking plain constants and plain functions, multi-state changing in Redux family becomes predictable at limited cost. Though, because of high coupling between reducers/slices and actions, overall cost of development is high.

In addition, an worth-mentioning insight is, the con of high coupling between reducers and actions as well as the con of incomplete modularization by default are not intrinsic characters of reducer-like solutions, because a reducer doesn't have to process more than one kind of actions, and states don't have to be organized as app-wide ones by default. Although it's still undeniable that Redux family goes much further in state management than MVC pattern, it's also possible to design a lower-cost reducer-like solution.

What's next

By far, important members of Redux family have been reviewed compared with MVC pattern, which reviews reducer-like solutions as a result. Then, in the next article, continuing to answer the question #1 in the last article, I would look into facebook's experiment of state management in React - Recoil.

Review of state management in React: getting started with an MVC example

Tue, 21 Feb 2023 12:02:27 +0000

To develop a good React app, doing good state management is necessary. Today in React, we have kinds of practices about state management and some of them have ended up as widely-accepted libraries. Though, there is no clear winner yet and new wheels are still being invented actively, which means none of the widely-accepted libraries is obviously better than the rest in the view of the user devs. And, it drives me to think about 2 questions:

How good are today's widely-accepted libraries of state management in React?
What does a better library of state management in React look like?

To answer the question #1, I would find a most commonly used way of doing state management before any library of state management emerged to build a complicated enough example module as a baseline. Then, for each today's widely-accepted library, I rebuild the same example module with it and review how good it is in comparison with the baseline.

To answer the question #2, I would try best to think up a way of doing state management by making the best of today's widely-accepted libraries based on the answer to the question #1. But at this stage, only the idea is described, by which I wish the posibility for better ways gets sown.

To complete the work, a series of articles entitled with 'Review of state management in React: ...' are getting written. And, this article, as the starting of the series, states the introduction as above and the former part of the answer to the question #1 as below.

Model-view-controller(MVC) pattern
Requirement of the example module
Example module built with MVC pattern
Review of state management with MVC pattern
What's next

Model-view-controller(MVC) pattern

Since MVC pattern was formally introduced, it along with its variants has been dominating the engineering method of developing interactive systems. And, it says:

Models are those components of the system application that actually do the work (simulation of the application domain). They are kept quite distinct from views, which display aspects of the models. Controllers are used to send messages to the model, and provide the interface between the model with its associated views and the interactive user interface devices (e.g., keyboard, mouse).

As models simulate the app domain, the states of models can directly represent the states of the app, which indicates MVC pattern is doing state management.

So, I would select MVC pattern as the previously mentioned 'most commonly used way of doing state management before any library of state management emerged' to build the example module.

Requirement of the example module

To make effective comparisons, the example module should be complicated enough. It should consist of at least 2 components with multiple related states handling user interactions to a certain degree. Though, to avoid getting lost in details, it should also not be too complicated. Then, a composite clock looks appropriate.

Example module built with MVC pattern

Now, let me build the baseline example module with MVC pattern. Here, create-react-app is used to initialize the React app. The option --template typescript is used to enable TypeScript:

$ npx create-react-app 01-getting-started-with-an-mvc-example --template typescript
# ...
$ cd 01-getting-started-with-an-mvc-example

The version of CRA in use is 5.0.1 and the generated directory structure looks as follows:

$ tree -I node_modules
.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   └── setupTests.ts
└── tsconfig.json

2 directories, 19 files

Then, src/App.tsx is cleared for later use:

// src/App.tsx
import { FC } from 'react';

const App: FC = () => {
  return null;
};

export default App;

Following files are unused so removed:

$ rm src/App.css src/App.test.tsx src/logo.svg

Also, to help with time parsing and formating, date-fns is installed:

$ npm i date-fns

The example module, the composite clock, would be all placed in src/CompositeClock. To match the 3 requried states, there would be 3 models, TimeModel, AnalogueModel and DigitalModel. They provide methods for changing and getting their states, and emit events for subscribers on these states changed. Also, they fulfill the relation of the 3 states as required.

And for controllers and views, TimeModel has none, AnalogueModel has AnalogueView and AnalogueController, DigitalModel as DigitalView and DigitalController. Then, all these parts are glued together by CompositeView and CompositeController to fulfill the functionality.

The 3 models are coded as follows:

// src/CompositeClock/TimeModel.ts
import { EventEmitter } from 'events';

export interface TimeState {
  timestamp: number;
}

export class TimeModel extends EventEmitter {
  static readonly EVENTS = {
    TIMESTAMP_CHANGED: 'timestamp-changed',
  } as const;

  private timestamp: number;

  constructor(timestamp?: number) {
    super();
    this.timestamp = timestamp ?? Date.now();
  }

  getState(): TimeState {
    return {
      timestamp: this.timestamp,
    };
  }

  changeTimestamp(timestamp: number) {
    this.timestamp = timestamp;
    this.emit(TimeModel.EVENTS.TIMESTAMP_CHANGED);
  }
}

// src/CompositeClock/AnalogueModel.ts
import { EventEmitter } from 'events';
import { TimeModel } from './TimeModel';

const TWO_PI = 2 * Math.PI;

export interface AnalogueAngles {
  hour: number;
  minute: number;
  second: number;
}

export interface AnalogueState {
  displayAngles: AnalogueAngles;
  isEditMode: boolean;
  editModeAngles: AnalogueAngles;
}

export class AnalogueModel extends EventEmitter {
  static readonly EVENTS = {
    DISPLAY_ANGLES_CHANGED: 'display-angles-changed',
    IS_EDIT_MODE_CHANGED: 'is-edit-mode-changed',
    EDIT_MODE_ANGLES_CHANGED: 'edit-mode-angles-changed',
  } as const;

  private timeModel: TimeModel;
  private displayAngles: AnalogueAngles;
  private isEditMode: boolean;
  private editModeAngles: AnalogueAngles;

  constructor(timeModel: TimeModel) {
    super();
    this.timeModel = timeModel;
    this.displayAngles = this.calcDisplayAngles();
    this.isEditMode = false;
    this.editModeAngles = { ...this.displayAngles };
    this.timeModel.addListener(TimeModel.EVENTS.TIMESTAMP_CHANGED, () => this.syncDisplayAngles());
  }

  getState(): AnalogueState {
    return {
      displayAngles: this.displayAngles,
      isEditMode: this.isEditMode,
      editModeAngles: this.editModeAngles,
    };
  }

  calcDisplayAngles(): AnalogueAngles {
    const d = new Date(this.timeModel.getState().timestamp);
    return {
      hour: ((d.getHours() % 12) / 12) * TWO_PI + (d.getMinutes() / 60) * (TWO_PI / 12),
      minute: (d.getMinutes() / 60) * TWO_PI + (d.getSeconds() / 60) * (TWO_PI / 60),
      second: (d.getSeconds() / 60) * TWO_PI,
    };
  }

  syncDisplayAngles(): void {
    this.displayAngles = this.calcDisplayAngles();
    this.emit(AnalogueModel.EVENTS.DISPLAY_ANGLES_CHANGED);
  }

  enterEditMode(): void {
    if (this.isEditMode) return;
    this.isEditMode = true;
    this.editModeAngles = { ...this.displayAngles };
    this.emit(AnalogueModel.EVENTS.IS_EDIT_MODE_CHANGED);
  }

  exitEditMode(submit: boolean = true): void {
    if (!this.isEditMode) return;
    this.isEditMode = false;
    if (submit) {
      const d = new Date(this.timeModel.getState().timestamp);
      d.setHours(
        Math.floor((this.editModeAngles.hour / TWO_PI) * 12) + 12 * Math.floor(d.getHours() / 12)
      );
      d.setMinutes((this.editModeAngles.minute / TWO_PI) * 60);
      d.setSeconds((this.editModeAngles.second / TWO_PI) * 60);
      this.timeModel.changeTimestamp(d.getTime());
    }
    this.emit(AnalogueModel.EVENTS.IS_EDIT_MODE_CHANGED);
  }

  changeEditModeMinuteAngle(minuteAngle: number): void {
    this.editModeAngles.minute = (minuteAngle + TWO_PI) % TWO_PI;
    this.editModeAngles.hour =
      (Math.floor((this.editModeAngles.hour / TWO_PI) * 12) + minuteAngle / TWO_PI) * (TWO_PI / 12);
    this.emit(AnalogueModel.EVENTS.EDIT_MODE_ANGLES_CHANGED);
  }
}

// src/CompositeClock/DigitalModel.ts
import { format, isMatch, parse } from 'date-fns';
import { EventEmitter } from 'events';
import { TimeModel } from './TimeModel';

export interface DigitalState {
  displayText: string;
  isEditMode: boolean;
  editModeText: string;
}

export class DigitalModel extends EventEmitter {
  static readonly EVENTS = {
    DISPLAY_TEXT_CHANGED: 'display-text-changed',
    IS_EDIT_MODE_CHANGED: 'is-edit-mode-changed',
    EDIT_MODE_TEXT_CHANGED: 'edit-mode-text-changed',
  } as const;

  static readonly FORMAT = 'HH:mm:ss';

  private timeModel: TimeModel;
  private displayText: string;
  private isEditMode: boolean;
  private editModeText: string;

  constructor(timeModel: TimeModel) {
    super();

    this.timeModel = timeModel;
    this.displayText = this.calcDisplayText();
    this.isEditMode = false;
    this.editModeText = this.displayText;

    this.timeModel.addListener(TimeModel.EVENTS.TIMESTAMP_CHANGED, () => this.syncDisplayText());
  }

  getState(): DigitalState {
    return {
      displayText: this.displayText,
      isEditMode: this.isEditMode,
      editModeText: this.editModeText,
    };
  }

  calcDisplayText(): string {
    return format(this.timeModel.getState().timestamp, DigitalModel.FORMAT);
  }

  syncDisplayText(): void {
    this.displayText = this.calcDisplayText();
    this.emit(DigitalModel.EVENTS.DISPLAY_TEXT_CHANGED);
  }

  enterEditMode(): void {
    if (this.isEditMode) return;
    this.isEditMode = true;
    this.editModeText = this.displayText;
    this.emit(DigitalModel.EVENTS.IS_EDIT_MODE_CHANGED);
  }

  exitEditMode(submit: boolean = true): void {
    if (!this.isEditMode) return;
    this.isEditMode = false;
    if (submit && this.isEditModeTextValid()) {
      this.timeModel.changeTimestamp(
        parse(this.editModeText, DigitalModel.FORMAT, this.timeModel.getState().timestamp).getTime()
      );
    }
    this.emit(DigitalModel.EVENTS.IS_EDIT_MODE_CHANGED);
  }

  changeEditModeText(editModeText: string): void {
    this.editModeText = editModeText;
    this.emit(DigitalModel.EVENTS.EDIT_MODE_TEXT_CHANGED);
  }

  isEditModeTextValid(): boolean {
    return isMatch(this.editModeText, DigitalModel.FORMAT);
  }
}

And, the controllers and views are coded as follows:

// src/CompositeClock/AnalogueView.tsx
import { FC, useEffect, useState } from 'react';
import { AnalogueController } from './AnalogueController';
import { AnalogueModel } from './AnalogueModel';
import styles from './AnalogueView.module.css';

interface Props {
  className?: string;
  model: AnalogueModel;
  controller: AnalogueController;
}

export const AnalogueView: FC<Props> = ({ className, model, controller }) => {
  const [{ displayAngles, isEditMode, editModeAngles }, setState] = useState(model.getState());

  const angles = isEditMode ? editModeAngles : displayAngles;

  useEffect(() => {
    [
      AnalogueModel.EVENTS.DISPLAY_ANGLES_CHANGED,
      AnalogueModel.EVENTS.IS_EDIT_MODE_CHANGED,
      AnalogueModel.EVENTS.EDIT_MODE_ANGLES_CHANGED,
    ].forEach((event) => {
      model.addListener(event, () => setState(model.getState()));
    });
  }, [model]);

  useEffect(() => {
    window.addEventListener('keydown', controller.onKeyDown);
    return () => window.removeEventListener('keydown', controller.onKeyDown);
  }, [controller]);

  return (
    <div
      className={`${className ?? ''} ${styles.root} ${isEditMode ? styles.editMode : ''}`}
      onMouseLeave={controller.onMouseLeave}
      onMouseUp={controller.onMouseUp}
      onMouseMove={controller.onMouseMove}
    >
      <div className={styles.axis} />
      <div
        className={`${styles.hand} ${styles.hour}`}
        style={{ transform: `rotateZ(${angles.hour}rad)` }}
      />
      <div
        className={`${styles.hand} ${styles.minute}`}
        style={{ transform: `rotateZ(${angles.minute}rad)` }}
        onMouseDown={controller.onMinuteHandMouseDown}
      />
      <div
        className={`${styles.hand} ${styles.second}`}
        style={{ transform: `rotateZ(${angles.second}rad)` }}
      />
    </div>
  );
};

/* src/CompositeClock/AnalogueView.module.css */
.root {
  margin: 12px;
  padding: 8px;
  width: 160px;
  height: 160px;
  border-radius: 100%;
  border: 1px solid black;
  position: relative;
}

.axis {
  position: absolute;
  background-color: black;
  left: 47.5%;
  top: 47.5%;
  width: 5%;
  height: 5%;
  border-radius: 100%;
}

.hand {
  position: absolute;
  background-color: black;
  transform-origin: bottom center;
}

.hand.hour {
  left: 48.5%;
  top: 25%;
  height: 25%;
  width: 3%;
}

.hand.minute {
  left: 49%;
  top: 10%;
  height: 40%;
  width: 2%;
  z-index: 10;
  cursor: pointer;
}

.hand.second {
  left: 49.5%;
  top: 10%;
  height: 40%;
  width: 1%;
}

.editMode.root {
  outline: 2px solid skyblue;
}

// src/CompositeClock/AnalogueController.ts
import type React from 'react';
import { AnalogueModel } from './AnalogueModel';

const TWO_PI = 2 * Math.PI;

export class AnalogueController {
  private model: AnalogueModel;

  constructor(model: AnalogueModel) {
    this.model = model;
  }

  onMinuteHandMouseDown = (e: React.MouseEvent<HTMLDivElement>): void => {
    e.preventDefault();
    this.model.enterEditMode();
  };

  onMouseLeave = (): void => {
    this.model.exitEditMode();
  };

  onMouseUp = (): void => {
    this.model.exitEditMode();
  };

  onKeyDown = (e: KeyboardEvent): void => {
    if (this.model.getState().isEditMode && e.key === 'Escape') {
      this.model.exitEditMode(false);
    }
  };

  onMouseMove = (e: React.MouseEvent<HTMLDivElement>): void => {
    const { isEditMode } = this.model.getState();
    if (!isEditMode) return;

    const boundingBox = e.currentTarget.getBoundingClientRect();
    const originX = boundingBox.x + boundingBox.width / 2;
    const originY = boundingBox.y + boundingBox.height / 2;

    const pointX = e.clientX - originX;
    const pointY = originY - e.clientY;

    this.model.changeEditModeMinuteAngle(this.calcEditModeMinuteAngle(pointX, pointY));
  };

  calcEditModeMinuteAngle(pointX: number, pointY: number): number {
    const pointLen = Math.sqrt(Math.pow(pointX, 2) + Math.pow(pointY, 2));

    const normalizedX = pointX / pointLen;
    const normalizedY = pointY / pointLen;

    const { editModeAngles } = this.model.getState();
    const oldX = Math.sin(editModeAngles.minute);
    const oldY = Math.cos(editModeAngles.minute);

    const rawMinuteAngle = Math.acos(normalizedY);

    const minuteAngle =
      normalizedY > 0 && oldY > 0
        ? normalizedX >= 0
          ? oldX < 0
            ? rawMinuteAngle + TWO_PI
            : rawMinuteAngle
          : oldX >= 0
          ? -rawMinuteAngle
          : -rawMinuteAngle + TWO_PI
        : normalizedX >= 0
        ? rawMinuteAngle
        : -rawMinuteAngle + TWO_PI;

    return minuteAngle;
  }
}

// src/CompositeClock/DigitalView.tsx
import { FC, useEffect, useRef, useState } from 'react';
import { DigitalController } from './DigitalController';
import { DigitalModel } from './DigitalModel';
import styles from './DigitalView.module.css';

interface Props {
  className?: string;
  model: DigitalModel;
  controller: DigitalController;
}

export const DigitalView: FC<Props> = ({ className, model, controller }) => {
  const [{ displayText, isEditMode, editModeText }, setState] = useState(model.getState());

  const refEditor = useRef<HTMLInputElement | null>(null);

  useEffect(() => {
    [
      DigitalModel.EVENTS.DISPLAY_TEXT_CHANGED,
      DigitalModel.EVENTS.IS_EDIT_MODE_CHANGED,
      DigitalModel.EVENTS.EDIT_MODE_TEXT_CHANGED,
    ].forEach((event) => {
      model.addListener(event, () => setState(model.getState()));
    });
  }, [model]);

  useEffect(() => {
    if (isEditMode && refEditor.current) {
      refEditor.current.select();
    }
  }, [isEditMode]);

  return (
    <div className={`${className ?? ''} ${styles.root} ${isEditMode ? styles.editMode : ''}`}>
      {isEditMode ? (
        <>
          <input
            className={styles.editor}
            type="text"
            ref={refEditor}
            value={editModeText}
            onBlur={controller.onEditorBlur}
            onChange={controller.onEditorChange}
            onKeyDown={controller.onEditorKeyDown}
          />
          {!model.isEditModeTextValid() && (
            <div className={styles.invalidHint}>
              The input time doesn't match the expected format which is '{DigitalModel.FORMAT}'.
            </div>
          )}
        </>
      ) : (
        <div onClick={controller.onDisplayClick}>{displayText}</div>
      )}
    </div>
  );
};

/* src/CompositeClock/DigitalView.module.css */
.root {
  border: 1px solid black;
  width: 200px;
  line-height: 30px;
  text-align: center;
}

.editor {
  width: 100%;
  text-align: center;
  font-size: inherit;
  padding: 0;
  border: none;
  outline: none;
}

.invalidHint {
  line-height: 1.2;
}

.editMode.root {
  outline: 2px solid skyblue;
}

// src/CompositeClock/DigitalController.ts
import type React from 'react';
import { DigitalModel } from './DigitalModel';

export class DigitalController {
  private model: DigitalModel;

  constructor(model: DigitalModel) {
    this.model = model;
  }

  onDisplayClick = (): void => {
    this.model.enterEditMode();
  };

  onEditorBlur = (): void => {
    this.model.exitEditMode(false);
  };

  onEditorChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    this.model.changeEditModeText(e.target.value);
  };

  onEditorKeyDown = (e: React.KeyboardEvent): void => {
    if (e.key === 'Enter') {
      this.model.exitEditMode();
    }
  };
}

// src/CompositeClock/CompositeView.tsx
import { FC, useEffect, useMemo } from 'react';
import { AnalogueController } from './AnalogueController';
import { AnalogueModel } from './AnalogueModel';
import { AnalogueView } from './AnalogueView';
import { CompositeController } from './CompositeController';
import styles from './CompositeView.module.css';
import { DigitalController } from './DigitalController';
import { DigitalModel } from './DigitalModel';
import { DigitalView } from './DigitalView';
import { TimeModel } from './TimeModel';

export const CompositeView: FC = () => {
  const timeModel = useMemo(() => new TimeModel(), []);
  const analogueModel = useMemo(() => new AnalogueModel(timeModel), [timeModel]);
  const analogueController = useMemo(() => new AnalogueController(analogueModel), [analogueModel]);
  const digitalModel = useMemo(() => new DigitalModel(timeModel), [timeModel]);
  const digitalController = useMemo(() => new DigitalController(digitalModel), [digitalModel]);
  const compositeController = useMemo(
    () => new CompositeController({ analogueModel, digitalModel, timeModel }),
    [analogueModel, digitalModel, timeModel]
  );

  useEffect(() => {
    const tickHandler = setInterval(() => {
      compositeController.tick();
    }, 100);
    return () => clearInterval(tickHandler);
  }, [compositeController]);

  return (
    <div className={styles.root}>
      <AnalogueView model={analogueModel} controller={analogueController} />
      <DigitalView model={digitalModel} controller={digitalController} />
    </div>
  );
};

/* src/CompositeClock/CompositeView.module.css */
.root {
  margin: 16px 8px;
  font-size: 16px;
}

// src/CompositeClock/CompositeController.ts
import { AnalogueModel } from './AnalogueModel';
import { DigitalModel } from './DigitalModel';
import { TimeModel } from './TimeModel';

export class CompositeController {
  private analogueModel: AnalogueModel;
  private digitalModel: DigitalModel;
  private timeModel: TimeModel;
  private timestampCorrection: number;

  constructor(models: {
    analogueModel: AnalogueModel;
    digitalModel: DigitalModel;
    timeModel: TimeModel;
  }) {
    this.analogueModel = models.analogueModel;
    this.digitalModel = models.digitalModel;
    this.timeModel = models.timeModel;
    this.timestampCorrection = this.calcTimestampCorrection();

    this.analogueModel.addListener(AnalogueModel.EVENTS.IS_EDIT_MODE_CHANGED, () => {
      if (!this.analogueModel.getState().isEditMode) {
        this.timestampCorrection = this.calcTimestampCorrection();
      }
    });

    this.digitalModel.addListener(DigitalModel.EVENTS.IS_EDIT_MODE_CHANGED, () => {
      if (!this.digitalModel.getState().isEditMode) {
        this.timestampCorrection = this.calcTimestampCorrection();
      }
    });
  }

  calcTimestampCorrection(): number {
    return this.timeModel.getState().timestamp - Date.now();
  }

  tick(): void {
    this.timeModel.changeTimestamp(Date.now() + this.timestampCorrection);
  }
}

Afterwards, CompositeView is exported and used in App.tsx:

// src/CompositeClock/index.ts
export { CompositeView as CompositeClock } from './CompositeView';

// src/App.tsx
import { FC } from 'react';
+import { CompositeClock } from './CompositeClock';

const App: FC = () => {
-  return null;
+  return <CompositeClock />;
};

export default App;

Then, the example module built with MVC pattern is complete. It can be previewed with the command npm start and its codebase is hosted at review-of-state-management-in-react/01-getting-started-with-an-mvc-example.

Review of state management with MVC pattern

In MVC pattern, state-changing logics are defined by model methods. To understand what states a model method changes, what model attributes the method changes needs to be tracked out by looking into function bodies of the method and all the direct or indirect subscribers of the state-changing event emitted by the method. Because more model methods can be invoked in or as subscribers of a state-changing event, more state-changing events can be emitted, then more and more model methods can be invoked. And, as the app scales up, fully tracking state-changing events can become very difficult. The result is, invoking any model method may lead to a tangled weave of state-changing logics, which makes states changing in MVC pattern unpredictable. It can be perceived by checking how TimeModel.ts, AnalogueModel.ts and DigitalModel.ts work with each other and their views. Unpredictable states changing due to difficulties in fully tracking state-changing events makes up the biggest con of MVC pattern.

But, meanwhile, a major pro of MVC pattern is, all the state-managing logics related to one state can be clearly defined in one model, which makes the app domain clearly split.

As a sum-up, doing state management with MVC pattern makes unpredictable states changing (but with limited benefits in other aspects).

What's next

By far, the baseline example module has been built with MVC pattern. Meanwhile, MVC pattern is reviewed based on it. Then, in the next article, continuing to answer the question #1, I would look into reducer-like solutions of state management in React - Redux and its family.

Server-side rendering for any React app on any FaaS provider

Sat, 04 Feb 2023 13:00:00 +0000

By this document, I'd like to introduce a general method to set up server-side rendering(SSR) for any React app on any FaaS provider. A "React app" is a web app with its client side (or frontend) built with React. A "FaaS provider" is a serverless computing platform, such as AWS Lambda. To state the idea clearly, a runnable demo app is constructed step by step below. I would guide you through the steps, then summarize the idea.

Thinking that the demo app should be practical but not overwelmed by details, its React client side would be constructed with commonly seen features, such as styling, routing, data fetching and assets loading, but at a limited cost. Meanwhile, it would be deployed on a widely accepted FaaS provider that has an easy setup. So, I'm going to use create-react-app(CRA) to initialize the demo app, enhance it, then get it deployed on Netlify with SSR added.

The demo app

Constructing the React client side without SSR

Firstly, let me initialize the React client side of the demo app using CRA. As TypeScript is being commonly used in today's frontend development, the option --template typescript is used here:

$ npx create-react-app the-demo-app --template typescript
# ...
$ cd the-demo-app

The version of CRA in use is 5.0.1 and the generated directory structure looks as below:

$ tree -I node_modules
.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   └── setupTests.ts
└── tsconfig.json

2 directories, 19 files

Among the generated files, src/App.css is importing and using src/App.css and src/logo.svg, which means features of styling and assets loading has been included:

// src/App.tsx
import './App.css';
import logo from './logo.svg';

function App() {
  return (
    <div className="App">
      ...
      <img src={logo} className="App-logo" alt="logo" />
      ...
    </div>
  );
}

export default App;

Now, to ensure the commonly seen features are all set, routing and data fetching are to be included, too. For the routing, react-router-dom, de facto routing lib in React, would be used:

$ npm i react-router-dom

To get the routing to work at a minimum cost, 2 pages and the routing logics that can switch them are needed. The content of src/App.tsx can be replaced with the routing logics while the old content gets moved to src/pages/Home/Page.tsx serving as one needed page. Then, a not-found page src/pages/NotFound/Page.tsx can be added serving as the other needed page. When the path / is visited, the former page gets shown. When any other path is visited, the latter page gets shown:

// src/App.tsx
import { FC } from 'react';
import { Route, Routes } from 'react-router-dom';
import { HomePage } from './pages/Home/Page';
import { NotFoundPage } from './pages/NotFound/Page';

export const App: FC = () => {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  );
};

// src/App.test.tsx
import { render, screen } from '@testing-library/react';
import { StaticRouter } from 'react-router-dom/server';
import { App } from './App';

jest.mock('./pages/Home/Page', () => ({
  HomePage: () => 'Home Page',
}));

jest.mock('./pages/NotFound/Page', () => ({
  NotFoundPage: () => 'Not Found Page',
}));

for (const [path, page] of Object.entries({
  '/': 'Home Page',
  '/somewhere-else': 'Not Found Page',
})) {
  test(`renders "${page}" if "${path}" is visited`, () => {
    render(
      <StaticRouter location={path}>
        <App />
      </StaticRouter>
    );
    expect(screen.getByText(page)).toBeInTheDocument();
  });
}

// src/pages/Home/Page.tsx
import { FC } from 'react';
import logo from '../../logo.svg';
import styles from './Page.module.css';

export const HomePage: FC = () => {
  return (
    <div className={styles.root}>
      <header className={styles.header}>
        <img src={logo} className={styles.logo} alt="logo" />
        <p>
          Edit <code>src/**/*.tsx</code> and save to reload.
        </p>
        <a
          className={styles.link}
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
};

/* src/pages/Home/Page.module.css */
.root {
  text-align: center;
}

.logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.link {
  color: #61dafb;
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// src/pages/NotFound/Page.tsx
import { FC } from 'react';
import styles from './Page.module.css';

export const NotFoundPage: FC = () => {
  return (
    <div className={styles.root}>
      <h1>Not Found</h1>
    </div>
  );
};

/* src/pages/NotFound/Page.tsx */
.root {
  text-align: center;
}

After that, to make the routing logics take effect, <BrowserRouter> is applied in src/index.tsx:

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { App } from './App';
import './index.css';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

For the data fetching, 2 other libs, @tanstack/react-query(whose old package name is react-query) and axios, are used:

$ npm i @tanstack/react-query axios

The data fetching logics are, the Home/Page.tsx invokes a query function that fetches the star count of a GitHub repo, then gets the result rendered:

// src/pages/Home/Page.tsx
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
import logo from '../../logo.svg';
+import { ParamsOfGetRepoStarCount, useGhRepoStarCountQuery } from '../../queries/gh';
import styles from './Page.module.css';

+export const paramOfGhRepoStarCountQuery: ParamsOfGetRepoStarCount = {
+  userName: 'facebook',
+  repoName: 'react',
+};

export const HomePage: FC = () => {
+  const numberFormat = useMemo(() => new Intl.NumberFormat(), []);
+  const { isLoading, isSuccess, data } = useGhRepoStarCountQuery(paramOfGhRepoStarCountQuery);
+
  return (
    <div className={styles.root}>
      <header className={styles.header}>
        <img src={logo} className={styles.logo} alt="logo" />
        <p>
          Edit <code>src/**/*.tsx</code> and save to reload.
        </p>
        <a
          className={styles.link}
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
-          Learn React
+          Learn React (⭐️ = {isLoading && 'loading...'}
+          {isSuccess && numberFormat.format(data.result)})
        </a>
      </header>
    </div>
  );
};

And here is the query function in src/queries/gh.ts:

// src/queries/gh.ts
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

export type ParamsOfGetRepoStarCount = Partial<{ userName: string; repoName: string }>;

export type ReturnOfGetRepoStarCount = { result: number };

export function getKeyOfGhRepoStarCountQuery(params: ParamsOfGetRepoStarCount) {
  return ['ghRepoStarCountQuery', params];
}

export function useGhRepoStarCountQuery(params: ParamsOfGetRepoStarCount) {
  return useQuery(getKeyOfGhRepoStarCountQuery(params), async () => {
    const { data: repoInfo } = await axios.get(
      `https://api.github.com/repos/${params.userName}/${params.repoName}`
    );
    return { result: repoInfo.stargazers_count } as ReturnOfGetRepoStarCount;
  });
}

As well as its base setup:

// src/queries/queryClient.ts
import { QueryClient } from '@tanstack/react-query';

export function createQueryClient(): QueryClient {
  return new QueryClient();
}

// src/index.tsx
+ import { QueryClientProvider } from '@tanstack/react-query';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { App } from './App';
import './index.css';
+import { createQueryClient } from './queries/queryClient';
import reportWebVitals from './reportWebVitals';

+const queryClient = createQueryClient();
+
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </QueryClientProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

By far, the client side of the demo app with commonly seen features of a React app is constructed. You may check it by running scripts from package.json.:

// package.json
  ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
  ...

The commands are npm start for previewing, npm run build for building, npm test for unit-testing. In some versions of CRA, with the features above, pages can't get refreshed automatically on edited in the previewing. If it is your case, setting FAST_REFRESH=false will help:

$ npm i cross-env

// package.json
  ...
  "scripts": {
-    "start": "react-scripts start",
+    "start": "cross-env FAST_REFRESH=false react-scripts start",
  ...

Adding SSR and deploying the app on Netlify

On diving into the SSR and the deployment on Netlify, let's take a look at how the essential logics of SSR in a React app work:

When a request for a page comes, the app's server side prepares the data that the requested page would request on the client side. Then, the data together with the root client-side React component are used to generate the server-side rendered html of the requested page. With the data serialized, the server side inserts it along with the server-side rendered html into the top-level html to make the final html as the response.
When the response of the requested page arrives, the app's client side deserializes the serialized data from the response, then uses it together with the root client-side React component to hydrate the server-side rendered html from the response to initialize the React client side.

So, in the first place, a server side that is able to import and use src/App.tsx (which is the root client-side React component here) should be set up. Also, as server-side logics on Netlify are primarily done by Netlify Functions, the convention of registering functions by files paths should be followed.

To use types in Netlify Functions, @netlify/functions is installed:

$ npm i @netlify/functions

Then, the Netlify function for SSR is created in src/server/functions/render_pages.tsx with a placeholder string returned for now:

// src/server/functions/render_pages.tsx
import { Handler } from '@netlify/functions';

export const handler: Handler = async (event, context) => {
  return { statusCode: 200, body: 'It works!' };
};

And the client-side webpack config is as much as possibly reused to create a server-side webpack config. It is adjusted for transpiling the Netlify functions files as well as the files imported by them, preserving the directory structure and stopping assets getting emitted. The server-side webpack config is created in webpack.server.config.js:

// webpack.server.config.js
const glob = require('glob');
const { set } = require('lodash');
const TranspilePlugin = require('transpile-webpack-plugin');
const nodeExternals = require('webpack-node-externals');

const envInQuestion = process.env.NODE_ENV ?? 'development';
const shouldPrintConfig = Boolean(process.env.PRINT_CONFIG);

process.env.NODE_ENV = envInQuestion;
process.env.FAST_REFRESH = 'false';
const webpackConfig = require('react-scripts/config/webpack.config')(envInQuestion);

webpackConfig.entry = () => glob.sync('src/server/**/*', { nodir: true, absolute: true });
webpackConfig.target = 'node';
webpackConfig.externals = [nodeExternals()];

removeAssetsEmitting();
removeUnusedPluginsAndOptimizers();

webpackConfig.plugins.push(
  new TranspilePlugin({
    longestCommonDir: __dirname + '/src',
    extentionMapping: { '.ts': '.js', '.tsx': '.js' },
  })
);

if (shouldPrintConfig) {
  console.dir(webpackConfig, { depth: Infinity });
}

function removeAssetsEmitting() {
  webpackConfig.module.rules.forEach(({ oneOf }) => {
    oneOf?.forEach((rule) => {
      if (rule.type?.startsWith('asset')) {
        set(rule, 'generator.emit', false);
      }

      const fileLoaderUseItem = rule.use?.find(({ loader }) => loader?.includes('file-loader'));
      if (fileLoaderUseItem) {
        set(fileLoaderUseItem, 'options.emitFile', false);
      }

      const cssLoaderUseItemIndex = rule.use?.findIndex(({ loader }) =>
        loader?.includes('css-loader')
      );
      if (cssLoaderUseItemIndex >= 0) {
        const cssLoaderOptionModules = rule.use[cssLoaderUseItemIndex].options?.modules;
        if (cssLoaderOptionModules) {
          cssLoaderOptionModules.exportOnlyLocals = true;
        }
        rule.use = rule.use.slice(cssLoaderUseItemIndex);
      }
    });
  });
}

function removeUnusedPluginsAndOptimizers() {
  webpackConfig.plugins = webpackConfig.plugins.filter((p) => {
    const ctorName = p.constructor.name;
    if (ctorName.includes('Html')) return false;
    if (ctorName.includes('Css')) return false;
    if (ctorName === 'WebpackManifestPlugin') return false;
    if (ctorName === 'DefinePlugin') return false;
    return true;
  });

  webpackConfig.optimization.minimizer = webpackConfig.optimization.minimizer.filter((m) => {
    const ctorName = m.constructor.name;
    if (ctorName.includes('Css')) return false;
    return true;
  });
}

module.exports = webpackConfig;

Also, the packages used in webpack.server.config.js need to be installed:

$ npm i webpack glob lodash transpile-webpack-plugin webpack-node-externals

The webpack plugin transpile-webpack-plugin collects files directly or indirectly imported by the entry, then gets them compiled and ouputted preserving the directory structure. The webpack helper webpack-node-externals externalizes installed deps to reduce the outputted file count.

After that, to run webpack, webpack CLI is needed:

$ npm i webpack-cli npm-run-all

To run multiple scripts from package.json, npm-run-all is needed:

$ npm i npm-run-all

To launch the previewing of the whole demo app including the client side and the server side, Netlify CLI is needed but installing it globally is good enough:

$ npm i -g netlify-cli

Then, scripts in package.json is extended and netlify.toml is created:

// package.json
...
  "scripts": {
-    "start": "cross-env FAST_REFRESH=false react-scripts start",
+    "start:client": "cross-env BROWSER=none FAST_REFRESH=false react-scripts start",
+    "start:server": "cross-env BUILD_PATH=server webpack -w -c webpack.server.config.js",
+    "start-all": "run-p start:*",
+    "dev": "netlify dev",
...

# netlify.toml
[functions]
directory = "server/server/functions"


[dev]
port = 8888
command = "npm run start-all"
targetPort = 3000

Now, executing the command npm run dev on the local machine launches the previewing, which starts the client-side dev server on port 3000, the server-side transpilation in watch mode and the server-side dev server on port 8888, with the url http://127.0.0.1:8888/ opened on the default browser. The Home/Page.tsx is rendered on the path / visited. The NotFound/Page.tsx is rendered on the path like /zxcv visited. The content It works! is rendered on the path /.netlify/functions/render_pages visited. The initial setup of the demo app's server side is made and the demo app becomes initially previewable as a whole.

Notice that, the previewing generates 2 directories, .netlify and server, which should be untracked by the version control. On the command netlify dev executed, .netlify is automatically added to .gitignore. And server needs to be manually added to .gitignore:

# .gitignore
...
# production
/build
+/server
...

Thinking that, in a real-world web app, the client side usually fetches http endpoints built in its own server side. To emulate that closely, another Netlify function is to be added for returning the star count of a GitHub repo and the client-side query function is to fetch data from it instead of directly from the GitHub endpoint. So, the new Netlify function is created in src/server/functions/gh_repo_star_count.ts and its data accessing logics and types are extracted into src/server/gh.ts which gets reused by the client side and the SSR:

// src/server/functions/gh_repo_star_count.ts
import { Handler } from '@netlify/functions';
import { getGhRepoStarCount } from '../gh/repo';

export const handler: Handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify(await getGhRepoStarCount(event.queryStringParameters ?? {})),
  };
};

// src/server/gh/repo.ts
import axios from 'axios';

export type ParamsOfGetRepoStarCount = Partial<{ userName: string; repoName: string }>;

export type ReturnOfGetRepoStarCount = { result: number };

export async function getGhRepoStarCount(
  params: ParamsOfGetRepoStarCount
): Promise<ReturnOfGetRepoStarCount> {
  if (!params.userName || !params.repoName) throw new Error('Bad params');
  const { data: repoInfo } = await axios.get(
    `https://api.github.com/repos/${params.userName}/${params.repoName}`
  );
  return { result: repoInfo.stargazers_count };
}

// src/queries/gh.ts
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
-
-export type ParamsOfGetRepoStarCount = Partial<{ userName: string; repoName: string }>;
-
-export type ReturnOfGetRepoStarCount = { result: number };
+import type { ParamsOfGetRepoStarCount, ReturnOfGetRepoStarCount } from '../server/gh/repo';

export function getKeyOfGhRepoStarCountQuery(params: ParamsOfGetRepoStarCount) {
  return ['ghRepoStarCountQuery', params];
}

export function useGhRepoStarCountQuery(params: ParamsOfGetRepoStarCount) {
  return useQuery(getKeyOfGhRepoStarCountQuery(params), async () => {
-    const { data: repoInfo } = await axios.get(
-      `https://api.github.com/repos/${params.userName}/${params.repoName}`
-    );
-    return { result: repoInfo.stargazers_count } as ReturnOfGetRepoStarCount;
+    const { data } = await axios.get(
+      '/.netlify/functions/gh_repo_star_count?' + new URLSearchParams(params).toString()
+    );
+    return data as ReturnOfGetRepoStarCount;
  });
}

// src/pages/Home/Page.tsx
import { FC, useMemo } from 'react';
import logo from '../../logo.svg';
-import { ParamsOfGetRepoStarCount, useGhRepoStarCountQuery } from '../../queries/gh';
+import { useGhRepoStarCountQuery } from '../../queries/gh';
+import type { ParamsOfGetRepoStarCount } from '../../server/gh/repo';
import styles from './Page.module.css';
...

Sometimes, a GitHub endpoint may fail because of the rate limit. If it is your case, setting a fallback value or introducing a cache will help:

// src/server/gh/repo.ts
...
+const fallbackResultOfGetRepoStarCount = 12345;
+
export async function getGhRepoStarCount(
  params: ParamsOfGetRepoStarCount
): Promise<ReturnOfGetRepoStarCount> {
  if (!params.userName || !params.repoName) throw new Error('Bad params');
-  const { data: repoInfo } = await axios.get(
-    `https://api.github.com/repos/${params.userName}/${params.repoName}`
-  );
-  return { result: repoInfo.stargazers_count };
+  try {
+    const { data: repoInfo } = await axios.get(
+      `https://api.github.com/repos/${params.userName}/${params.repoName}`
+    );
+    return { result: repoInfo.stargazers_count };
+  } catch {
+    return { result: fallbackResultOfGetRepoStarCount };
+  }
}

In addition, here is an optional patch in case debugging with the client-side dev server is wanted. Declaring the proxy field in package.json pointing at http://127.0.0.1:8888 can help pages in http://127.0.0.1:3000 to fetch the server-side endpoints:

// package.json
...
+  "proxy": "http://127.0.0.1:8888",
...

Next, it's time to do the SSR. Only requests for pages are supposed to be handled, but, limited by available routing options of Netlify, requests that are possibly for pages all need to be redirected to the functions/render_pages.tsx:

# netlify.toml
[functions]
directory = "server/server/functions"


+[[redirects]]
+from = "/"
+to = "/.netlify/functions/render_pages"
+status = 200
+force = true
+
+[[redirects]]
+from = "/*"
+to = "/.netlify/functions/render_pages"
+status = 200
+
+
[dev]
port = 8888
command = "npm run start-all"
targetPort = 3000
+
+
+[context.dev.environment]
+CLIENT_DEV_ORIGIN = "http://127.0.0.1:3000"

Here, the environment variable CLIENT_DEV_ORIGIN is injected to the previewing so that the existence and the url origin of the client-side dev server is exposed.

On CLIENT_DEV_ORIGIN presented, when a get request to the functions/render_pages.tsx has its path ending with an non-empty file extension, the request is dispatched to the client-side dev server:

// src/server/functions/render_pages.tsx
import { Handler, HandlerEvent, HandlerResponse } from '@netlify/functions';
import axios from 'axios';
import path from 'node:path';

const { CLIENT_DEV_ORIGIN } = process.env;

export const handler: Handler = async (event, context) => {
  const shouldGetFromClientDevServer =
    CLIENT_DEV_ORIGIN && event.httpMethod === 'GET' && path.parse(event.path).ext;
  if (shouldGetFromClientDevServer) {
    return await getFromClientDevServer(event);
  }

  return { statusCode: 200, body: 'It works!' };
};

async function getFromClientDevServer(event: HandlerEvent): Promise<HandlerResponse> {
  const { status, data, headers } = await axios.get(`${CLIENT_DEV_ORIGIN}${event.path}`, {
    responseType: 'text',
    responseEncoding: 'binary',
  });
  return {
    statusCode: status,
    headers: headers as {},
    body: Buffer.from(data, 'binary').toString('base64'),
    isBase64Encoded: true,
  };
}

The rest requests are the ones for pages and SSR is to be added for them. To manipulate html, jsdom is installed:

$ npm i jsdom @types/jsdom

Then, src/server/functions/render_pages.tsx is extended along with src/pages/Home/ssrData.ts and src/types.ts created:

// src/server/functions/render_pages.tsx
import { Handler, HandlerEvent, HandlerResponse } from '@netlify/functions';
import { dehydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query';
import axios from 'axios';
import { JSDOM } from 'jsdom';
import path from 'node:path';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server';
import { App } from '../../App';
import { createQueryClient } from '../../queries/queryClient';
import { ParamsOfFillInSsrData } from '../../types';

const { CLIENT_DEV_ORIGIN } = process.env;

export const handler: Handler = async (event, context) => {
  const shouldGetFromClientDevServer =
    CLIENT_DEV_ORIGIN && event.httpMethod === 'GET' && path.parse(event.path).ext;
  if (shouldGetFromClientDevServer) {
    return await getFromClientDevServer(event);
  }

  const clientIndexDom = new JSDOM(await getClientIndexHtml());
  const { document } = clientIndexDom.window;

  try {
    const queryClient = createQueryClient();
    await autoFillInSsrData({ event, context, queryClient });
    addDehydratedScript(document, queryClient);
    const rootHtml = renderToString(
      <QueryClientProvider client={queryClient}>
        <StaticRouter location={event.path}>
          <App />
        </StaticRouter>
      </QueryClientProvider>
    );
    document.querySelector('#root')!.innerHTML = rootHtml;
    queryClient.clear();
  } catch (e) {
    console.error(e);
  }

  return { statusCode: 200, body: clientIndexDom.serialize() };
};

async function getFromClientDevServer(event: HandlerEvent): Promise<HandlerResponse> {
  const { status, data, headers } = await axios.get(`${CLIENT_DEV_ORIGIN}${event.path}`, {
    responseType: 'text',
    responseEncoding: 'binary',
  });
  return {
    statusCode: status,
    headers: headers as {},
    body: Buffer.from(data, 'binary').toString('base64'),
    isBase64Encoded: true,
  };
}

async function getClientIndexHtml(): Promise<string> {
  if (!getClientIndexHtml.cachedResult) {
    let result: string;
    if (CLIENT_DEV_ORIGIN) {
      const { data } = await axios.get(`${CLIENT_DEV_ORIGIN}/`, { responseType: 'text' });
      result = data;
    } else {
      result = '<div id="root"></div>';
    }
    getClientIndexHtml.cachedResult = result;
  }
  return getClientIndexHtml.cachedResult;
}
getClientIndexHtml.cachedResult = false as string | false;

async function autoFillInSsrData(params: ParamsOfFillInSsrData): Promise<void> {
  const { event } = params;

  let pageName: string | false = false;
  if (event.path === '/') {
    pageName = 'Home';
  }

  if (pageName) {
    const { fillInSsrData } = await import(`../../pages/${pageName}/ssrData`);
    await fillInSsrData(params);
  }
}

function addDehydratedScript(document: Document, queryClient: QueryClient): void {
  const scriptAsStr = `window.__REACT_QUERY_STATE__=${JSON.stringify(dehydrate(queryClient))};`;
  const scriptAsElm = document.createElement('script');
  scriptAsElm.innerHTML = scriptAsStr;
  document.head.append(scriptAsElm);
}

// src/pages/Home/ssrData.ts
import { paramOfGhRepoStarCountQuery } from './Page';
import { getKeyOfGhRepoStarCountQuery } from '../../queries/gh';
import { getGhRepoStarCount } from '../../server/gh/repo';
import type { ParamsOfFillInSsrData } from '../../types';

export async function fillInSsrData({ queryClient }: ParamsOfFillInSsrData): Promise<void> {
  await queryClient.prefetchQuery(getKeyOfGhRepoStarCountQuery(paramOfGhRepoStarCountQuery), () =>
    getGhRepoStarCount(paramOfGhRepoStarCountQuery)
  );
}

// src/types.ts
import type { HandlerContext, HandlerEvent } from '@netlify/functions';
import type { QueryClient } from '@tanstack/react-query';

export type ParamsOfFillInSsrData = {
  event: HandlerEvent;
  context: HandlerContext;
  queryClient: QueryClient;
};

For each page that requests server-side data, a ssrData.ts file is given for preparing its own SSR data. The functions/render_pages.tsx selects the proper ssrData.ts file based on the request path to prepare the proper SSR data. Together with the client-side root React component <App>, the server-side rendered html is generated. Afterwards, the SSR data is serialized as the global variable __REACT_QUERY_STATE__ inside a script html element. Meanwhile, on CLIENT_DEV_ORIGIN presented, the top-level html is fetched from the client-side dev server. With the script html element and the server-side rendered html inserted, the top-level html is returned as the response.

That's the server-side part of SSR. For the client-side part, the global variable __REACT_QUERY_STATE__ is deserialized for the hydration:

// src/react-app-env.d.ts
/// <reference types="react-scripts" />

+interface Window {
+  __REACT_QUERY_STATE__?: {};
+}

// src/index.tsx
-import { QueryClientProvider } from '@tanstack/react-query';
+import { Hydrate, QueryClientProvider } from '@tanstack/react-query';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { App } from './App';
import './index.css';
import { createQueryClient } from './queries/queryClient';
import reportWebVitals from './reportWebVitals';

const queryClient = createQueryClient();
+const dehydratedState = window.__REACT_QUERY_STATE__ ?? {};

-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-root.render(
+ReactDOM.hydrateRoot(
+  document.getElementById('root') as HTMLElement,
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
+      <Hydrate state={dehydratedState}>
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </Hydrate>
    </QueryClientProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Now, with the previewing launched, visiting the path / or /zxcv verifies the SSR result of the Home/Page.tsx or NotFound/Page.tsx, which is also doable by using curl:

$ curl http://127.0.0.1:8888/
...
<div id="root"><div class="Page_root__VJmx-"><header class="Page_header__LpSVE"><img src="/static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg" class="Page_logo__KFvWL" alt="logo"><p>Edit <code>src/**/*.tsx</code> and save to reload.</p><a class="Page_link__iAwDC" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">Learn React (⭐️ = <!-- -->201,386<!-- -->)</a></header></div></div>
...

$ curl http://127.0.0.1:8888/zxcv
...
<div id="root"><div class="Page_root__3XcfJ"><h1>Not Found</h1></div></div>
...

Wth the SSR added in the previewing, a flash of unstyled content(FOUC) can happen because, on browser, the server-side rendered html appears prior to the styles inserted on the JS files loaded. Though, it's expected when style-loader is used. CRA uses style-loader in react-scripts start to do the hot module replacement(HMR) for the styles in the previewing. But when the app gets built and deployed to the remote environment, CRA inserts the styles into the top-level html at compile time in react-scripts build, so the FOUC problem won't exist in the end. (But if you still think the FOUC problem matters, controlling the visibility of the server-side rendered html with checking process.env.NODE_ENV === 'development' may help.)

With the previewing made ready, the demo app is getting built and deployed to the remote environment. In the remote environment, there is no client-side dev server launched but are only the built client-side assets. And I need to extend package.json, netlify.toml and src/server/functions/render_pages.tsx:

// package.json
...
"scripts": {
    "start:client": "cross-env BROWSER=none FAST_REFRESH=false react-scripts start",
    "start:server": "cross-env BUILD_PATH=server webpack -w -c webpack.server.config.js",
    "start-all": "run-p start:*",
    "dev": "netlify dev",
-    "build": "react-scripts build",
+    "build:client": "cross-env BUILD_PATH=client react-scripts build",
+    "build:server": "cross-env BUILD_PATH=server NODE_ENV=production webpack -c webpack.server.config.js",
+    "build-all": "run-s build:*",
...

# netlify.toml
[functions]
directory = "server/server/functions"
+node_bundler = "nft"
+included_files = ["server/**/*", "client/**/*.html"]
...
+[build]
+command = "npm run build-all"
+publish = "client"
+
+[build.environment]
+NODE_ENV = "production"
...

// src/server/functions/render_pages.tsx
import { Handler, HandlerEvent, HandlerResponse } from '@netlify/functions';
import { dehydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query';
import axios from 'axios';
import { JSDOM } from 'jsdom';
+import fs from 'node:fs';
import path from 'node:path';
+import { promisify } from 'node:util';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server';
import { App } from '../../App';
import { createQueryClient } from '../../queries/queryClient';
import { ParamsOfFillInSsrData } from '../../types';

const { CLIENT_DEV_ORIGIN } = process.env;
+const CLIENT_INDEX_HTML_PATH = path.resolve('client/index.html');
...
async function getClientIndexHtml(): Promise<string> {
  if (!getClientIndexHtml.cachedResult) {
    let result: string;
    if (CLIENT_DEV_ORIGIN) {
      const { data } = await axios.get(`${CLIENT_DEV_ORIGIN}/`, { responseType: 'text' });
      result = data;
    } else {
-      result = '<div id="root"></div>';
+      result = await promisify(fs.readFile)(CLIENT_INDEX_HTML_PATH, 'utf8');
    }
    getClientIndexHtml.cachedResult = result;
  }
  return getClientIndexHtml.cachedResult;
}
getClientIndexHtml.cachedResult = false as string | false;
...

The build directory of the client-side assets is adjusted from build to client and is used as the publish directory of Netlify. In the remote environment, with the current routing options of Netlify, for a get request whose path matches an asset path in the publish directory, the matched asset is returned. Meanwhile, in the functions/render_pages.tsx, the top-level html is read from the file client/index.html. Notice that, as the server-side transpilation is already done, node_bundler = "nft" is used in netlify.toml to stop Netlify doing any extra processing in the deploying.

By the way, to untrack the generated directory client, .gitignore needs to be modified:

# .gitignore
...
# production
-/build
+/client
/server
...

Finally, following the guide Import from an existing repository in the Netlify docs, the demo app is deployed. The final codebase of the demo app is in the GitHub repo licg9999/server-side-rendering-with-cra-on-netlify. And its url after the deployment is https://bucolic-sprinkles-002beb.netlify.app/. The SSR can be verified by visiting the path / or /zxcv, which is also doable by using curl:

$ curl https://bucolic-sprinkles-002beb.netlify.app/
...<div id="root"><div class="Page_root__VJmx-"><header class="Page_header__LpSVE"><img src="/static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg" class="Page_logo__KFvWL" alt="logo"><p>Edit <code>src/**/*.tsx</code> and save to reload.</p><a class="Page_link__iAwDC" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">Learn React (⭐️ = <!-- -->201,431<!-- -->)</a></header></div></div>...

$ curl https://bucolic-sprinkles-002beb.netlify.app/zxcv
...<div id="root"><div class="Page_root__3XcfJ"><h1>Not Found</h1></div></div>...

By far, the demo app of a React app that has commonly seen features and is deployed on Netlify with SSR added is fully constructed.

The idea under the hood

Going over the construction of the demo app, the idea of setting up SSR for any React app on any FaaS provider is summarized as below:

A server side that is able to import and use the client-side root React component needs to be made first. The client-side compilation config is as much as possibly reused to create the server-side transpilation config, with the key adjustments of preserving the directory structure and stopping assets getting emitted, for the files of the FaaS entries.
For each page that requests server-side data, a SSR sibling file is given for preparing its own SSR data. On a page request coming, the server side selects the proper SSR sibling file based on the request path to prepare the proper SSR data. The logics and types of the data accessing to the data source can be extracted, then be reused by the client-side data fetching, the server-side data returing and the SSR data preparing.
The SSR data together with the client-side root component are used to generate the server-side rendered html. The top-level html can be fetched from the client-side dev server in the local environment (or the previewing), or be read from the built client-side assets in the remote environment. With the SSR data serialized then inserted along with the server-side rendered html, the top-level html is returned as the response.
The client side deserializes the SSR data from the response, then uses it together with the root client-side React component to hydrate the server-side rendered html from the response to initialize the React client side.
The extra processing by the FaaS provider in the deploying needs to be stopped, if there is any, because the server-side transpilation is already done. Also, some dispatching needs to be added to help launch the app as a whole in the local environment.

Among the points, I think the #1 can be the most important one. The reason is, the rest ones are only suggesting possible best practices, but the server side that is able to import and use the client-side root React component always constitutes the foundation of SSR. So, once the server-side transpilation can be made from the reuse of the client-side compilation config, just like this demo app of SSR with CRA on Neltify, SSR can be added to any React app on any FaaS provider.

Transpile Webpack Plugin: transpiling files with webpack without bundling

Sat, 04 Feb 2023 08:18:39 +0000

Did you ever think about transpiling files with webpack without bundling? We use webpack a lot today for web development. It’s so loved because it bundles everything into bundles with limited steps. And the bundles work perfectly on browser. But, in NodeJS, the situation becomes trivial.

In NodeJS, it’s more natural to run separately organized JS files. Source file path related logics are sometimes not avoidable, such as event registering in AWS Lambda, or migrations managing with Sequelize CLI. When this happens and SSR(server side rendering) is requested at the same time, to stick to webpack for its powerful features will look to be the only choice. Though, it also means we have to tackle with the bundles to fit into source file path related logics, which is quite a bit of work.

To ease the situation, Transpile Webpack Plugin(transpile-webpack-plugin) is built. The plugin transpiles input files into output files individually. Let’s check it out.

Base case

Assuming there are 2 files in dir src, one exports a string constant, and the other imports then prints it. A minimal setup is like:

.
├── src/
│   ├── constants.js
│   └── index.js
├── package.json
└── webpack.config.js

Now, we are to transpile files with webpack from dir src into dir dist in a way like:

.
├── dist/
│   ├── constants.js
│   └── index.js
...

First, we need to make sure webpack(v5) and webpack-cli(v4) installed:

$ npm i -D webpack webpack-cli

Then, install transpile-webpack-plugin(v1):

$ npm i -D transpile-webpack-plugin

After that, adjust webpack.config.js:

const TranspilePlugin = require('transpile-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
  },
  plugins: [new TranspilePlugin()],
};

At last, run npx webpack. As a result, input files are collected from files directly or indirectly imported by the entry, then get compiled and ouputted keeping the same directory structure in the output directory. We may verify the output by node dist/index.js or exploring the generated code.

Handling SSR

Supposing the frontend part has been built with webpack and involves transforming or emitting kinds of files or assets like .tsx .css .png .jpg, and now want to do server side rendering in the backend part (which is a NodeJS server) but preserve the directory structure of source files at runtime.

We just need to reuse the frontend part webpack config for the backend part, but disable all the asset emitting and add new TranspilePlugin() in plugins. The plugin has been tested to be as much as workable with webpack settings like resolve aliasing, externals, source map, and so on.

More cases

Several options are available in the plugin. Among them, the most useful ones might be longestCommonDir and extentionMapping.

By default, the plugin uses the common dir of input files as the base dir to evaluate the relative paths of output files in output dir. In case input files might live in some deeply embedded dir and we want to preserve more of the dir in the output, we use longestCommonDir. Given input files src/server/index.js src/server/constants/greeting.js and output dir dist, with this option undefined, output files will be dist/index.js dist/constants/greeting.js. But with this option './src', output files will be dist/server/index.js dist/server/constants/greeting.js.

By default, the plugin generates output files with the same extensions as input files. (Btw, NodeJS regards any file with extension that it can’t recognize as a JS file.) In case we want to change the extensions like from .ts to .js, extentionMapping with { '.ts': '.js' } makes it.

Issue?

Hoping Transpile Webpack Plugin(transpile-webpack-plugin) makes the development with webpack in NodeJS easier. If any question or any comments, just open them in transpile-webpack-plugin/issues. Discussions are welcomed!

DEV Community: C

Must predictable state changes come at a high cost?

What does it mean by predictable?

The drawback of Redux

Possibility of predictability at a low cost

Review of state management in React: summary and prospect

Table of contents

Summary for today's widely-accepted libraries

Prospect of a better library

Postscript

Review of state management in React: kinds of lightweight trials - MobX, Zustand, Jotai and Valtio

Table of contents

Lightweight trials

Recalling the example module

Example module built with MobX

Review of state management with MobX

Example module built with Zustand

Review of state management with Zustand

Example module built with Jotai

Review of state management with Jotai

Example module built with Valtio

Review of state management with Valtio

Summary for lightweight trials

What's next

Review of state management in React: facebook's experiment - Recoil

Table of contents

Recalling the example module

Example module built with Recoil

Review of state management with Recoil

What's next

Review of state management in React: reducer-like solutions - Redux and its family

Table of contents

Reduce function

Recalling the example module

Example module built with Redux

Review of state management with Redux

Example module built with Redux Toolkit

Review of state management with Redux Toolkit

Example module built with Flux

Review of state management with Flux

Example module built with useReducer

Review of state management with useReducer

Summary for reducer-like solutions

What's next

Review of state management in React: getting started with an MVC example

Table of contents

Model-view-controller(MVC) pattern

Requirement of the example module

Example module built with MVC pattern

Review of state management with MVC pattern

What's next

Server-side rendering for any React app on any FaaS provider

The demo app

Constructing the React client side without SSR

Adding SSR and deploying the app on Netlify

The idea under the hood

Transpile Webpack Plugin: transpiling files with webpack without bundling

Base case

Handling SSR

More cases

Issue?

Example module built with `useReducer`

Review of state management with `useReducer`