Unexpected behavior when map() is applied to the property of the tracked state

Greetings! I have an action in my reducer which map over an array in the store:

setMyArrayInStore: ({ payload, store }) => {
    const { rowData, type } = payload;

    return {
      myArrayInStore: store.myArrayInStore.map(
        (item) => {
          if (item.field !== rowData.field) {
            return item;
          }

          return {
            ...item,
            [type]: rowData[type],
          };
        }
      ),
    };
  },

In another part of my code, I’m using myArrayInStore as a useEffect() dependency.

const { myArrayInStore } = useTrackedState();

useEffect(() => {
  ...some actions on myArrayInStore change
}, [myArrayInStore], 

Without react-tracked useEffect() recognize that myArrayInStore was recreated and fires actions inside.

When I change the code to use react-tracked, useEffect() no longer fire actions.

[dai-shi]

Thanks for the example! I understand what’s happening.

This happens because you change the state object reference, but the internal values are not changed. When useTrackedState compares two objects (prev state and next state), it doesn’t find any differences (= what you display is the same), so it will not re-render (not commit). You might have tried console.log(myArrayInStore) and see something, but this only mean it invokes the function (which must be pure), but it’s actually not committed (I know this behavior is not desired, but can’t be helped for now. v2 with useMutableSource will probably fix this.)

Here’s the example that changes what it shows. https://codesandbox.io/s/not-working-store-forked-inedh?file=/src/MyComponent.js

Another workaround is to use useSelector instead of useTrackedState if you want to detect the reference change, and all the values are not changed.

const myArrayInStore = useSelector(useCallback(state => state.myArrayInStore, []));

Hope it helps!

[dai-shi]

Closing this as answered.