React: переключение PopUp повторно отображает весь компонент

Question

Я все еще разбираюсь во всех тонкостях React, так что, пожалуйста, будьте терпеливы.

Я создаю компонент, используя MaterialUI, и этот компонент содержит сетку и PopOver. Грубый макет может выглядеть так:

export const Overblik = () => {
    const [filterAnchorEl, setFilterAnchorEl] = useState<HTMLButtonElement | null>(null);

    return (
      <div>
      <IconButton onClick={handleFilterClick}></IconButton>
          <Popover
            anchorEl={filterAnchorEl}
            open={Boolean(filterAnchorEl)}
            onClose={handleFilterClose}
            anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'left'
          }}><div>stuff</div></Popover>
          <Grid>[somelongListGoesHere]</Grid>
        </div>
        );
      }

Теперь дело в том, что, когда я переключаю состояние filterAnchorEl, чтобы показать всплывающее окно, сетка, отмеченная [somelongListGoesHere], также повторно визуализируется, из-за чего всплывающее окно кажется медленным. sh. Я полагаю, что с моим подходом должно быть что-то не так, но есть ли предложения, как лучше с этим справиться?

Answer 1

попробуйте переместить сетку на другой компонент

const MyGrid = () => (<Grid>[somelongListGoesHere]</Grid>)

, а затем в вашем компоненте просто отрендерите его

 <IconButton onClick={handleFilterClick}></IconButton>
 <Popover ... />
 <MyGrid />

если никакие реквизиты не меняются для компонента MyGrid, он не будет повторный рендеринг. вы также можете использовать React.memo для кэширования следующим образом:

const MyGrid = React.memo(() => (<Grid>[somelongListGoesHere]</Grid>))