title: A string ref, "canvas", has been found within a strict mode tree
body: <p>I wanted to use an npm package which is a simple matrix effect <a href="https://www.npmjs.com/package/react-matrix-effect" rel="nofollow noreferrer">https://www.npmjs.com/package/react-matrix-effect</a> but due to some bugs I just decided to copy and fixed it on my own and also modify it to my needs. I fixed few bugs there however one warning I can't figure out how to fix... I've never use canvas or refs before so it is a bit new to me</p>
  <p>Here is the complete code</p>
  <pre><code>import React, {
     Component
  } from 'react';
  import PropTypes from 'prop-types';
  
  class Matrix extends Component {
     static propTypes = {
        width: PropTypes.number,
        height: PropTypes.number,
        fullscreen: PropTypes.bool,
        colSize: PropTypes.number,
        fontSize: PropTypes.number,
        interval: PropTypes.number,
        color: PropTypes.string,
        frequency: PropTypes.number,
        speed: PropTypes.number,
        style: PropTypes.object,
        zIndex: PropTypes.number
     };
  
     static defaultProps = {
        width: 640,
        height: 480,
        fullscreen: false,
        colSize: 11,
        fontSize: 13.5,
        interval: 30,
        color: '#00cc33',
        frequency: 0.005,
        speed: 1.6
     };
  
     constructor(props) {
        super(props);
  
        this.state = {
           canvas: null
        };
  
        this.draw = this.draw.bind(this);
        this.updateDimensions = this.updateDimensions.bind(this);
     }
  
     componentDidMount() {
        this.setState({ canvas: this.refs.canvas }, () =&gt; {
           let columns = [];
           let context = this.state.canvas.getContext('2d');
           let size = this.props.colSize;
           let source = '0 0 1 1';
           let width = this.props.fullscreen ? window.innerWidth : this.props.width;
           let height = this.props.fullscreen ? window.innerHeight : this.props.height;
           let canvas = this.state.canvas;
           canvas.width = width;
           canvas.height = height;
  
           let numberOfColumns = Math.floor(width / size * 3 );
  
           this.setState({canvas, columns, context, size, source, numberOfColumns}, () =&gt; {
  
              for (let i = 0; i &lt; numberOfColumns; i++) {
                 columns.push(0)
              }
  
              this.draw();
              let interval = setInterval(this.draw, 50 / this.props.speed);
              this.setState({interval});
  
              if (this.props.fullscreen)
                 window.addEventListener('resize', this.updateDimensions);
           });
        });
     }
  
     draw() {
        let context = this.state.context;
        let columns = this.state.columns;
        let numberOfColumns = this.state.numberOfColumns;
  
        context.fillStyle = 'rgba(0,0,0,0.05)';
        context.fillRect(0, 0, this.state.canvas.width, this.state.canvas.height);
        context.fillStyle = this.props.color;
        context.font = '700 ' + this.props.fontSize + 'px Consolas,monaco,monospace';
  
        for (let columnIndex = 0; columnIndex &lt; numberOfColumns; columnIndex++) {
           let index = Math.floor(Math.random() * this.state.source.length);
           let character = this.state.source[index];
           let positionX = columnIndex * this.state.size;
           let positionY = columns[columnIndex] * this.state.size;
  
           context.fillText(character, positionX, positionY);
           if (positionY &gt;= this.state.canvas.height &amp;&amp; Math.random() &gt; 1 - this.props.frequency) {
              columns[columnIndex] = 0;
           }
           columns[columnIndex]++;
        }
  
        this.setState({ context, columns })
     };
  
     updateDimensions() {
        let canvas = this.state.canvas;
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
     }
  
     render() {
        let style = this.props.style ? this.props.style : {};
        return (
           &lt;div style={{...style, background: '#000000', width: this.props.fullscreen ? '100vw' : this.props.width + 'px', height:  this.props.fullscreen ? '100vh' : this.props.height + 'px', overflow: 'hidden', zIndex: this.props.zIndex}}&gt;
              &lt;canvas ref='canvas'/&gt;
           &lt;/div&gt;
        );
     }
  }
  
  export default Matrix; 
  </code></pre>
  <p>The warning is in <code>componentDidMount</code></p>
  <pre><code>  componentDidMount() {
        this.setState({ canvas: this.refs.canvas }, () =&gt; {  //&lt;= here
           let columns = [];
  </code></pre>
  <p>Full warning message</p>
  <blockquote>
  <p>index.js:1 Warning: A string ref, &quot;canvas&quot;, has been found within a
  strict mode tree. String refs are a source of potential bugs and
  should be avoided. We recommend using useRef() or createRef() instead</p>
  </blockquote>