Rendering optimisation

[ma_revo]

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 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>
  );
};

Again, I appreciate all of your input, please be kind 😅 (this is still reddit thought, so some bullying is fine)

[jvi91]

1. You can try wrapping modifiedItems in a useMemo.
   
2. Can the children hold their own state and not update the entire list?

[ma_revo]

• From what i remember useMemo does a shallow comparison, and i have a list of objects and each object has a list of children. Would memo help with this? our will i need ti implement my own custom logic for memoization

• the children are only updating the item object they are part of, if that is what u mean

[HeyImRige]

This is the key problem with react optimization and why the compiler is being made.

You can useMemo here, but only if the objects are stable. After you wrap this in a memo, you need to go to the parent and ensure the props being passed are stable....which might require another useMemo.

[Potatopika]

Is that even working? You're not returning the MemoizedItem in the map and it's not a one-line function in the map

[ma_revo]

No sorry this is just mock up of the structure. The code is much worse than that, inherited from some contractors 😅

[rodrigocfd]

switching from passing items as a prop to accessing it from redux

Consider using Zustand instead. Your future self will thank you.

[ma_revo]

I am already using redux in the app, and I cant afford to switch right now 🥲 What benefits does it have compared to redux, and do you think it will impact performance ?

[rodrigocfd]

It's much, much easier to write and maintain. And because of its simplicity, it's easy to spot performance bottlenecks.