Library: react-ridge-state

I’m trying out my own state library it works great so far, do not see any error logs! Only problem is does not have a reducer but I created my own dispatch function.

Do you think the following is suitable in comparison to other libraries?

import React, { unstable_useTransition as useTransition } from 'react';
import {
  newRidgeState,
  useRidgeState,
  getRidgeState,
  setRidgeState,
} from 'react-ridge-state';

import {
  syncBlock,
  useRegisterIncrementDispatcher,
  ids,
  useCheckTearing,
  initialState,
  reducer,
} from '../common';

const globalState = newRidgeState(initialState);

const dispatch = (action) => {
  const old = getRidgeState(globalState);
  setRidgeState(globalState, reducer(old, action));
};

const Counter = React.memo(() => {
  const [count] = useRidgeState(globalState);
  syncBlock();
  return <div className="count">{count.count}</div>;
});

const Main = () => {
  const [state] = useRidgeState(globalState);
  useCheckTearing();
  useRegisterIncrementDispatcher(
    React.useCallback(() => {
      dispatch({ type: 'increment' });
    }, [])
  );
  const [localCount, localIncrement] = React.useReducer((c) => c + 1, 0);
  const normalIncrement = () => {
    dispatch({ type: 'increment' });
  };
  const [startTransition, isPending] = useTransition();
  const transitionIncrement = () => {
    startTransition(() => {
      dispatch({ type: 'increment' });
    });
  };

  return (
    <div>
      REACT_RIDGE_STATE
      <button type="button" id="normalIncrement" onClick={normalIncrement}>
        Increment shared count normally (two clicks to increment one)
      </button>
      <button
        type="button"
        id="transitionIncrement"
        onClick={transitionIncrement}
      >
        Increment shared count in transition (two clicks to increment one)
      </button>
      <span id="pending">{isPending && 'Pending...'}</span>
      <h1>Shared Count</h1>
      {ids.map((id) => (
        <Counter key={id} />
      ))}
      <div className="count">{state.count}</div>
      <h1>Local Count</h1>
      {localCount}
      <button type="button" id="localIncrement" onClick={localIncrement}>
        Increment local count
      </button>
    </div>
  );
};

const App = () => <Main />;

export default App;

[dai-shi]

I will check that issue later. Been there done that. It’s extremely tricky to keep all states in React and provide Recoil API (not impossible though).

For the other path (= not global), I developed react-tracked.

[dai-shi]

Looks good. It’s close to the case of Recoil, which I added lately. Please check that out and compare with it.

https://github.com/web-ridge/react-ridge-state/blob/master/src/index.ts Just had a quick look. Small and clean. Nice. If I understand it correctly, it suffers from the tearing issue. As I keep saying, that doesn’t mean really bad, but what can be done with it is to use use-subscription now or wait for useMutableSource.