What is correct lifecycle method in React 16.3 to update canvas from props?

Question

I have a Canvas component, which looks approximately like this:

<

Answer 1

Use componentDidUpdate for DOM manipulations like this. A shouldComponentUpdate won’t really make a difference for a component with a single child that always has the same props. So you should be able to remove it without a significant difference in performance.

If you've profiled the application and determined that in this particular case it does make a difference, you can hoist the element into constructor.

This way React will skip over it completely (which effectively works the same way as shouldComponentUpdate):

class Canvas extends React.Component {
  constructor(props) {
    super(props);
    this._ctx = null;
    this._child =  {
      this._ctx = node ? node.getContext('2d') : null
    } />;
  }

  componentDidUpdate(prevProps){
    // Manipulate this._ctx here
  }

  render() {
    // A constant element tells React to never re-render
    return this._child;
  }
}

You could also split it into two components:

class Canvas extends React.Component {
  saveContext = ctx => {
    this._ctx = ctx;
  }

  componentDidUpdate(prevProps){
    // Manipulate this._ctx here
  }

  render() {
    return ;
  }
}


class PureCanvas extends React.Component {
  shouldComponentUpdate() {
    return false;
  }

  render() {
    return (
       node ? this.props.contextRef(node.getContext('2d') : null)}
      />;
  }
}