What is correct lifecycle method in React 16.3 to update canvas from props? : <p>I have a Canvas component, which looks approximately like this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>class Canvas extends React.Component{

    saveRef = node =&gt; {
        this._canvas = node;
    }
    
    shouldComponentUpdate(){
        /*I will never re-render this component*/
        return false;
    }
    
    componentWillReceiveProps( nextProps ){
        /*Here I do manipulations with this._ctx, when new props come*/
    }
    
    render(){
        return (
            &lt;canvas ref={this.saveRef} /&gt;
        );
    }
    
    componentDidMount(){
        this._ctx = this._canvas.getContext( "2d" );
    }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>React community began to deprecate <code>componentWillReceiveProps</code> in order to replace it with <code>getDerivedStateFromProps</code>. I can use <code>componentDidUpdate</code> to perform my drawings, but then I need to remove <code>shouldComponentUpdate</code> and I will have a lot of useless render calls. What is the correct performant way to update my component in react 16.3, when new props come?</p>
