How not to change the child component when the state of the parent changes?

Question

React

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

I send a request to the server, and the Drawer redraws the entire component before opening, which is why it takes a very long time to load. How can I change isDrawerOpen so that it doesn't redraw the entire component?

All code

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;

It is necessary that the GroupTree is not updated

Answer 1

Inherit GroupTree from PureComponent and check in it via shouldComponentUpdate, if the props haven't changed, then you don't need to re-render it