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?