Как не изменять дочерний комппонент при изменении state у родителя?

Question

[midzurana]

handleDrawerOpen () {
        this.setState({
            isDrawerOpen: true
        });
    }

Я отправляю запрос на сервер, и Drawer прежде чем открыться, перерисовывает весь компонент, из-за чего загрузка идет очень долго. Как изменить isDrawerOpen, чтобы он не перерисовывал весь компонент?

Весь код

class GroupsPageComponent extends React.Component {
    constructor () {
        super();

        this.state = {
            isDrawerOpen: false
        };
    }

    handleDrawerClose () {
        this.setState({
            isDrawerOpen: false
        });
    }

    onGroupSelect (id) {
        this.setState({
            isDrawerOpen: true
        });
    }

    render () {
        return (
            <div className="container">
                <Grid container item xs={12} spacing={2}>
                    <Grid container item xs={7}>
                        <SimpleCard>
                            <GroupsTree
                                onGroupSelect={this.onGroupSelect}
                                showMessage={this.props.showMessage}
                                showDialog={this.props.showDialog}
                            />
                        </SimpleCard>
                    </Grid>
                    <Grid container item xs={6}>
                        <Drawer
                            anchor="right"
                            variant="persistent"
                            open={this.state.isDrawerOpen}
                        >
                            <div className="drawer-wrapper">
                                <List>
                                    <Grid>
                                        <IconButton
                                            onClick={this.handleDrawerClose}
                                        >
                                            <ArrowForwardIosIcon />
                                        </IconButton>
                                    </Grid>
                                    <Grid>
                                        <StatusPieDiagram
                                            collection={this.props.statusCollection}
                                        />
                                    </Grid>
                                    <Grid>
                                        <GroupDetais
                                            model={this.props.model}
                                        />
                                    </Grid>
                                </List>
                            </div>
                        </Drawer>
                    </Grid>
                </Grid>

            </div>
        );
    }
}

GroupsPageComponent.defaultProps = {
    model: new GroupModel(),
    statusCollection: new StatusCollection()
};

export default GroupsPageComponent;

Надо, чтобы не обновлялся GroupTree

Comments

[Алексей Уколов]

Покажите весь код.

[Дмитрий]

Не видно ни запроса на сервер, ни почему обновляется GroupTree, который никак не зависит от стейта показанного компонента. Код не соответствует описанию, вопрос должен быть дописан или удалён как бестолковый

Answer 1

[thehighhomie]

Унаследуй GroupTree от PureComponent и в нем проверяй через shouldComponentUpdate, если не изменились пропсы то не нужно его ререндерить