title: React Child with useEffect() not updating on Parent State Change
body: <p>In my parent Component:</p>
  <pre><code>&lt;div&gt;
    &lt;h3&gt;Option &lt;span&gt;{this.state.currentOption + 1}&lt;/span&gt; of &lt;span&gt;{this.state.options}&lt;/span&gt;&lt;/h3&gt;
    &lt;Button onClick={this.handleOption} variant=&quot;primary&quot; type=&quot;submit&quot;&gt;
      {` Next &gt;&gt;`}
    &lt;/Button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I am calling a hook:</p>
  <pre><code>handleOption = event =&gt; {
    event.preventDefault();
    let option = this.state.currentOption;
    const numOptions = this.state.stackOptions.length;
    if (++option &gt;= numOptions) {
      option = 0;
    } 
    this.setState({
      currentOption: option,
    });
  }
  </code></pre>
  <p>Which I wish to cycle through an array of objects to render in Canvas:</p>
  <pre><code>import React, { useRef, useEffect } from 'react'
  
  const StackRender = props =&gt; {
    
    const canvasRef = useRef(null)
    
    useEffect(() =&gt; {
      const canvas = canvasRef.current
      const context = canvas.getContext('2d')
      renderOption(props.name, canvas)
    }, [])
    
    return &lt;canvas ref={canvasRef} {...props}/&gt;
  }
  </code></pre>
  <p>however, the child component (the canvas) doesn't update on the parent state change.</p>