react-redux: flat tree seems to continue to force updates

Viewed 21

I've been using react-redux for a while now. Despite this, I can't figure out what might be causing the re-renders given the following.

I have a tree structure that I serialize/deserialize with each update to a node (tree or subtree). The updates are driven by events generated by the UI.

Here is the sequence following an event generated by the UI:

// middleware

      // instantiate the Tree instance to compute changes
      const tree = Tree.fromFlatNodes(getFlatTreeFromStore());

      try {
        const updatedTree = Tree.moveNode(tree, {
          event, 
          DEBUG,
        });

        next([
          setTree(Tree.toFlatNodes(updatedTree.root)),
          setNotification({
            message: `updated flat tree`,
            feature: DRAFTING,
          }),
        ]);

      } catch (e) {
        if (e instanceof InvalidTreeStateError) {
          next(setNotification({ message: e.message, feature: DRAFTING }));
        } else {
          throw e;
        }
      }

The reducer that handles the SET_TREE event type:

// reducer

  // dispatched by middleware
  [SET_TREE]: (state, { payload }) => {
    return {
      ...state,
      tree: payload,
    };
  },

The selector for the node state only requires the node id:

/**
 * Return values that remain constant despite updates to the tree.
 */
export const selectNodeSeed = (stateFragment, id) => {
  const { data, height, childIds } = stateFragment.tree?.[id];

  return {
    id,
    height,
    childIds,
    dataType: data?.type ?? null,
  };
};

Retrieving the node state:


  const { height, childIds = [], etlUnitType } = useSelector(
    (state) => selectNodeSeed(state, id),
    shallowEqual,
  );

Base on what I'm showing here, does anyone see why an update to anywhere in the tree, causes all of the node components to re-render?

0 Answers
Related