title: What is correct lifecycle method in React 16.3 to update canvas from props?
body: <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>