Need help with reactive-react-redux?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

480 Stars 12 Forks MIT License 325 Commits 3 Opened issues


React Redux binding with React Hooks and Proxy

Services available


Need anything else?

Contributors list

# 29,024
296 commits
# 227,166
1 commit

There are several projects related to this repo. Here's the index of those.

  • reactive-react-redux v5-alpha (this repo): This has an experimental react-redux binding with useMutableSource. It provides useTrackedState, which tracks the usage of state in render, and it's originally proposed in this repo.
  • react-tracked: This project is to provide useTrackedState with React Context. v1.6 provides createTrackedSelector that will create useTrackedState from useSelector.
  • react-redux #1503: A pull request to add useTrackedState to the official react-redux library.
  • proxy-memoize: This is another project which is not tied to React, but combined with useSelector, we get a similar functionality like useTrackedState.


CI npm size discord

React Redux binding with React Hooks and Proxy

If you are looking for a non-Redux library, please visit react-tracked which has the same hooks API.


This is a library to bind React and Redux with Hooks API. It has mostly the same API as the official react-redux Hooks API, so it can be used as a drop-in replacement if you are using only basic functionality.

There are two major features in this library that are not in the official react-redux.

1. useTrackedState hook

This library provides another hook

which is a simpler API than already simple
. It returns an entire state, but the library takes care of optimization of re-renders. Most likely,
performs better than
without perfectly tuned selectors.


has no stale props issue.

2. useMutableSource without Context

react-redux v7 has APIs around Context. This library is implemented with useMutableSource, and it patches the Redux store. APIs are provided without Context. It's up to developers to use Context based on them. Check out


There's another difference from react-redux v7. This library directly use useMutableSource, and requires useCallback for the selector in useSelector. equalityFn is not supported.

How tracking works

A hook

returns an entire Redux state object with Proxy, and it keeps track of which properties of the object are used in render. When the state is updated, this hook checks whether used properties are changed. Only if it detects changes in the state, it triggers a component to re-render.


npm install reactive-react-redux

Usage (useTrackedState)

import React from 'react';
import { createStore } from 'redux';
import {
} from 'reactive-react-redux';

const initialState = { count: 0, text: 'hello', };

const reducer = (state = initialState, action) => { switch (action.type) { case 'increment': return { ...state, count: state.count + 1 }; case 'decrement': return { ...state, count: state.count - 1 }; case 'setText': return { ...state, text: action.text }; default: return state; } };

const store = patchStore(createStore(reducer));

const Counter = () => { const state = useTrackedState(store); const { dispatch } = store; return (

Count: {state.count} dispatch({ type: 'increment' })}>+1 dispatch({ type: 'decrement' })}>-1
); };

const TextBox = () => { const state = useTrackedState(store); const { dispatch } = store; return (

Text: {state.text} dispatch({ type: 'setText', text: })} />
); };

const App = () => ( <>



> );



patch Redux store for React


  • store
    Store<State, Action>


import { createStore } from 'redux';
import { patchStore } from 'reactive-react-redux';

const reducer = ...; const store = patchStore(createStore(reducer));


useTrackedState hook

It return the Redux state wrapped by Proxy, and the state prperty access is tracked. It will only re-render if accessed properties are changed.


  • patchedStore
    PatchedStore<State, Action>
  • opts
    Opts (optional, default


import { useTrackedState } from 'reactive-react-redux';

const Component = () => { const state = useTrackedState(store); ... };


useSelector hook

selector has to be stable. Either define it outside render or use useCallback if selector uses props.


  • patchedStore
    PatchedStore<State, Action>
  • selector
    function (state: State): Selected


import { useCallback } from 'react';
import { useSelector } from 'reactive-react-redux';

const Component = ({ count }) => { const isBigger = useSelector(store, useCallack(state => state.count > count, [count])); ... };




with tracked state is not compatible, because
stops state access, thus no tracking occurs. This is a special memo to be used instead of
with tracking support.


  • Component
  • areEqual


import { memo } from 'reactive-react-redux';

const ChildComponent = memo(({ obj1, obj2 }) => { // ... });



You can create Context based APIs like react-redux v7.

import { createContext, createElement, useContext } from 'react';
import {
  useSelector as useSelectorOrig,
  useTrackedState as useTrackedStateOrig,
} from 'reactive-react-redux';

export type State = ...;

export type Action = ...;

const Context = createContext(new Proxy({}, { get() { throw new Error('use Provider'); }, }) as PatchedStore);

export const Provider: React.FC }> = ({ store, children, }) => createElement(Context.Provider, { value: store }, children);

export const useDispatch = () => useContext(Context).dispatch;

export const useSelector = ( selector: (state: State) => Selected, ) => useSelectorOrig(useContext(Context), selector);

export const useTrackedState = () => useTrackedStateOrig(useContext(Context));


You can create a selector hook with tracking support.

import { useTrackedState } from 'reactive-react-redux';

export const useTrackedSelector = (patchedStore, selector) => selector(useTrackedState(patchedStore));

Please refer this issue for more information.


You can combine useTrackedState and useDispatch to make a hook that returns a tuple like

import { useTrackedState, useDispatch } from 'reactive-react-redux';

export const useTracked = (patchedStore) => { const state = useTrackedState(patchedStore); const dispatch = useDispatch(patchedStore); return useMemo(() => [state, dispatch], [state, dispatch]); };


Proxy and state usage tracking may not work 100% as expected. There are some limitations and workarounds.

Proxied states are referentially equal only in per-hook basis

const state1 = useTrackedState(patchedStore);
const state2 = useTrackedState(patchedStore);
// state1 and state2 is not referentially equal
// even if the underlying redux state is referentially equal.

You should use

only once in a component.

An object referential change doesn't trigger re-render if an property of the object is accessed in previous render

const state = useTrackedState(patchedStore);
const { foo } = state;
return ;

const Child = React.memo(({ foo }) => { // ... }; // if foo doesn't change, Child won't render, so is only marked as used. // it won't trigger Child to re-render even if foo is changed.

You need to use a special

provided by this library.
import { memo } from 'reactive-react-redux';

const Child = memo(({ foo }) => { // ... };

Proxied state might behave unexpectedly outside render

Proxies are basically transparent, and it should behave like normal objects. However, there can be edge cases where it behaves unexpectedly. For example, if you console.log a proxied value, it will display a proxy wrapping an object. Notice, it will be kept tracking outside render, so any prorerty access will mark as used to trigger re-render on updates.

useTrackedState will unwrap a Proxy before wrapping with a new Proxy, hence, it will work fine in usual use cases. There's only one known pitfall: If you wrap proxied state with your own Proxy outside the control of useTrackedState, it might lead memory leaks, because useTrackedState wouldn't know how to unwrap your own Proxy.

To work around such edge cases, the first option is to use primitive values.

const state = useTrackedState(patchedStore);
const dispatch = useUpdate(patchedStore);
dispatch({ type: 'FOO', value: state.fooObj }); // Instead of using objects,
dispatch({ type: 'FOO', value: state.fooStr }); // Use primitives.

The second option is to use

import { getUntrackedObject } from 'react-tracked';
dispatch({ type: 'FOO', value: getUntrackedObject(state.fooObj) });

You could implement a special dispatch function to do this automatically.


The examples folder contains working examples. You can run one of them with

PORT=8080 npm run examples:01_minimal

and open http://localhost:8080 in your web browser.

You can also try them in 01 02 03 04 05 06 07 08 09 11 12 13


benchmark result

See #32 for details.


We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.