Consider the mock code below:

interface CanvasProps {
  height: number;
  width: number;
  items: Item[];
}

const Canvas = ({ height, width, items }: CanvasProps) => {
  const modifiedItems = modifyItems(items);

  return (
    <div style={{ height, width }}>
      {modifiedItems.map((item: Item) => {
        <Item key={item.id} {...item} />;

        item.children.map((childItem) => <ChildItem key={childItem.id} {...childItem} />);
      })}
    </div>
  );
};

In my use case, items is a big list and as shown in the code, I am doing some modifications on the list first and rendering it. Each item object has a list of children that are also being looped through and rendered.
One important thing to add is that each item gives the user the ability to update its state, that update will bubble up resulting in an updated list of items.

I am thinking of making two changes to improve performance, and would appreciate your opinion/suggestions in that regard:

• switching from passing items as a prop to accessing it from redux, my making is that since the list is getting updated the update to the prop will trigger a rerender of the whole component.

• wrap item and the rendering of it’s children in a memorized component, that way when the items list is updated, only the updated nodes will be rendered.

The code should look like follows:

interface CanvasProps {
  height: number;
  width: number;
}

const Canvas = ({ height, width, items }: CanvasProps) => {
  const { items } = useSelector(ItemsSlice);
  const modifiedItems = modifyItems(items);

  return (
    <div style={{ height, width }}>
      {modifiedItems.map((item: Item) => {
        <MemoizedItem key={item.id} {...item} />;
      })}
    </div>
  );
};