diff --git a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx b/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx index f4e40e00..0f22de5f 100644 --- a/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx +++ b/packages/react/src/additional-components/MiniMap/MiniMapNodes.tsx @@ -49,6 +49,11 @@ function MiniMapNodes({ return ( <> {nodes.map((nodeId) => ( + // The split of responsibilities between MiniMapNodes and + // NodeComponentWrapper may appear weird. However, it’s designed to + // minimize the cost of updates when individual nodes change. + // + // For more details, see a similar commit in `NodeRenderer/index.tsx`. {
{nodeIds.map((nodeId) => { return ( + // The split of responsibilities between NodeRenderer and + // NodeComponentWrapper may appear weird. However, it’s designed to + // minimize the cost of updates when individual nodes change. + // + // For example, when you’re dragging a single node, that node gets + // updated multiple times per second. If `NodeRenderer` were to update + // every time, it would have to re-run the `nodes.map()` loop every + // time. This gets pricey with hundreds of nodes, especially if every + // loop cycle does more than just rendering a JSX element! + // + // As a result of this choice, we took the following implementation + // decisions: + // - NodeRenderer subscribes *only* to node IDs – and therefore + // rerender *only* when visible nodes are added or removed. + // - NodeRenderer performs all operations the result of which can be + // shared between nodes (such as creating the `ResizeObserver` + // instance, or subscribing to `selector`). This means extra prop + // drilling into `NodeComponentWrapper`, but it means we need to run + // these operations only once – instead of once per node. + // - Any operations that you’d normally write inside `nodes.map` are + // moved into `NodeComponentWrapper`. This ensures they are + // memorized – so if `NodeRenderer` *has* to rerender, it only + // needs to regenerate the list of nodes, nothing else.