Как оптимизировать списки при повторных рендрах?

Question

[lexstile]

Есть список категорий и блюд:

{positions.map(({ id, name, ref, dishes }) => (
              <InView key={id} threshold="0" rootMargin="-50% 0% -50% 0%" onChange={onChangeInView(id)}>
                <Group getRootRef={ref} header={<Header mode="secondary">{name}</Header>}>
                  <Div>
                    <Grid.Row>
                      {dishes.map((item) => (
                        <Grid.Col key={item.id} xs={6}>
                          <Position
                            position={item}
                            count={get(cart.positions, `${item.id}.quantity`, 0)}
                            onAddPosition={onAddPosition}
                            onRemovePosition={onRemovePosition}
                          />
                        </Grid.Col>
                      ))}
                    </Grid.Row>
                  </Div>
                </Group>
              </InView>
            ))}

Есть глупый компонент для отрисовки конкретной позиции:

export const Position = memo(({ position, count, onAddPosition, onRemovePosition }) => {...});

Проблема в том, что все позиции перерендериваются при изменении одной, что не должно быть.
Проблему решил через React.memo, что доказывает, что пропсы других аналогичных компонентов не изменяются.
Но как показалось, React.memo можно было избежать.
На что обратить внимание? Или другого способа решения данной проблемы в текущем кейсе нет?

Answer 1

[Alexandroppolus]

Но как показалось, React.memo можно было избежать.

зачем? здесь оно в самый раз.

а вообще у тебя какая-то хрень в нейминге. По идее, компонент Position должен быть для каждого элемента массива positions. А то что у тебя называется Position, должно называться Dish, и тоже быть memo
т.е. так:

{positions.map(({ id, name, ref, dishes }) => <Position ... />)}

export const Position = memo(({ ...,  dishes, ... }) => {
.........
   {dishes.map((item) => <Dish ... />}
.....
});

тогда при изменении чего-то, например, внутри блюда, будет перерендер компонента со списком позиций, перерендер одной позиции с блюдом, и перерендер блюда.
Это минимум для иммутабельного стейта. Если хочешь совсем упороться и выкинуть перерендер списка, то mobx в помощь.

Comments

[Alexandroppolus]

обрати внимание, что всю верстку элемента списка я запихнул в компоненты Position и Dish.

если сделать, например, так:

{positions.map(({ id, name, ref, dishes }) => <InView><Position ... /></InView>)}

то кроме вышеупомянутых ререндеров, у тебя было бы ещё N ререндеров компонента InView. А так они уехали в Position и потому избежали лишнего ререндера. Вывод: старайся весь элемент списка обернуть в memo-компонент.

[lexstile]

Alexandroppolus, класс, спасибо большое за замечания, люблю конструктив! :)