react-tracked

While React Tracked and MobX both utilize Proxies to provide effortless render optimization and similar ease of use, they differ fundamentally in state management philosophy:

• MobX: Based on mutable states.
• React Tracked: Based on immutable states (consistent with Pure React and React Redux).

To use react-tracked, you must install it along with its required peer dependency scheduler via npm.

npm install react-tracked react scheduler

You can define a generic reducer and pass reducer, initialState, and init as props to the Provider. This is the most typical usage pattern for dynamic state initialization.

const { 
  Provider, 
  useTracked, 
  // ... 
} = createContainer(({ reducer, initialState, init }) => useReducer(reducer, initialState, init));

const reducer = ...;

const App = ({ initialState }) => (
  <Provider reducer={reducer} initialState={initialState}>
    ...
  </Provider>
);

If you have an existing state in props and want to sync it with a container, use useEffect inside useValue to update the container's state whenever the prop changes. Note that propState must be updated immutably.

const useValue = ({ propState }) => {
  const [state, setState] = useState(propState);
  useEffect(() => {
    setState(propState);
  }, [propState]);
  return [state, setState];
};

const {
  Provider,
  useTracked,
  // ...
} = createContainer(useValue);

const App = ({ propState }) => <Provider propState={propState}>...</Provider>;

You can initialize state with an empty object. For TypeScript users, it is recommended to use a generic to define the state type.

const {
  Provider,
  useTracked,
  // ...
} = createContainer(() => useState<State>({}));

const App = () => (
  <Provider>
    ...
  </Provider>
);

You can use useEffect within useValue to set up event listeners that call dispatch when events occur (e.g., window resizing).

const useValue = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  useEffect(() => {
    const listener = () => {
      dispatch({
        type: 'WINDOW_RESIZED',
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };
    window.addEventListener('resize', listener);
    return () => {
      window.removeEventListener('resize', listener);
    };
  }, []);
  return [state, dispatch];
};

const {
  Provider,
  useTracked,
  // ...
} = createContainer(useValue);

const App = () => (
  <Provider>
    ...
  </Provider>
);

To provide custom update functions (like increment or decrement) within your state, store them in the state object returned by useValue. You must use useCallback and useMemo to ensure the state object remains stable.

Note: Using custom update functions prevents the benefits of concurrentMode in createContainer.

const useValue = () => {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount((c) => c + 1), []);
  const decrement = useCallback(() => setCount((c) => c - 1), []);
  const state = useMemo(
    () => ({ count, increment, decrement }),
    [count, increment, decrement],
  );
  return [
    state,
    () => {
      throw new Error('use functions in the state');
    },
  ];
};

const { Provider, useTrackedState } = createContainer(useValue);

const App = () => <Provider>...</Provider>;

In development mode, you can investigate the list of tracked paths for a specific state using useTrackedState.

In React DevTools, navigate to the following path to see the AffectedDebugValue: TrackedState -> TrackedState -> AffectedDebugValue -> DebugValue.

You can optimize useSelector from react-redux using createTrackedSelector. This allows components to only re-render when the specific properties they access from the Redux state change, without manually writing complex memoized selectors.

import { useSelector, useDispatch } from 'react-redux';
import { createTrackedSelector } from 'react-tracked';

// Create the tracked version of useSelector
const useTrackedSelector = createTrackedSelector(useSelector);

const Counter = () => {
  // Use it just like useSelector, but with automatic property tracking
  const state = useTrackedSelector();
  const dispatch = useDispatch();
  
  return (
    <div >
      <span >Count: {state.count}</span>
      <button type="button" onClick={() => dispatch({ type: 'increment' })}>
        +1
      </button>
    </div>
  );
};