React Sync Reducer

A library for creating reducers that can be efficiently accessed via context. Type-safe and compatible with Concurrent React.

Motivation

In React applications, managing state by combining useReducer and useContext can sometimes lead to performance issues. This is because each context-consuming component is re-rendered whenever the context value changes. React Sync Reducer can be used to solve this issue.

Installation

npm install react-sync-reducer

Documentation

Call the createReducer function outside of your React components

import { createReducer } from 'react-sync-reducer';
import type { Action } from 'react-sync-reducer';

interface State {
  value: number;
}

type Actions = Action<'increment'> | Action<'setValue', number>;

const { ReducerProvider, useDispatch, useSelector } = createReducer(
  (state: State, action: Actions) => {
    switch (action.type) {
      case 'increment': {
        return {
          ...state,
          value: state.value + 1
        };
      }
      case 'setValue': {
        return {
          ...state,
          value: action.payload
        };
      }
    }
  }
);

Wrap your child components with the returned ReducerProvider and set the initial state

function Component() {
  return (
    <ReducerProvider initialState={{ value: 0 }}>
      <DispatchComponent />
      <SelectorComponent />
    </ReducerProvider>
  );
}

Use the returned useDispatch and useSelector hooks in your child components

function DispatchComponent() {
  const dispatch = useDispatch();

  return (
    <>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'setValue', payload: 99 })}>
        Set Value to 99
      </button>
    </>
  );
}

function SelectorComponent() {
  const value = useSelector((state) => state.value);

  return <p>The current value is: {value}</p>;
}