The question about when react shouldComponentUpdate will re-render

background:
put the cytoscape (diagram plug-in) in a separate file, as follows:

export default class Cytoscape extends React.Component {
    componentDidMount() {
       
    }    
    shouldComponentUpdate(nextProps) {
        let prevState = this.props;
        let nextState = nextProps;
        console.log("nextProps:",Immutable.fromJS(prevState.data).equals(Immutable.fromJS(nextProps.data)));
        if (!Immutable.fromJS(prevState.data).equals(Immutable.fromJS(nextProps.data))) {
            return true
        }else{
            return false
        }
    }
    render() {
        ...
        }

in the shouldComponentUpdate method, it is determined whether the data of the diagram has changed. If the data is changed, it will be re-rendered, and if it is not changed, it will not be re-rendered.
question:
because the node on this diagram can drag any position, now add a restore button in the upper right corner, but click this restore button, data has not changed. Causes the diagram not to be re-rendered to restore.

Mar.23,2021

when you click the restore button, change the state, in shouldComponentUpdate not only to detect props changes, but also to consider state changes.

shouldComponentUpdate(nextProps, nextState)
Menu