title: Using ContextAPI doesn't re-render its consumer, but content is changed. Why?
body: <p>Consider this little example. I did some experiments with Context API while learning through the book.</p>
  <pre><code>const MyContext = React.createContext(0);
  
  const D3 = () =&gt; {
      console.log('render D3');
      return &lt;MyContext.Consumer&gt;{num =&gt; `${num}`}&lt;/MyContext.Consumer&gt;;
  };
  
  const D2 = React.memo(() =&gt; {
      console.log('render D2');
      return &lt;D3 /&gt;;
  });
  
  const D1 = React.memo(() =&gt; {
      console.log('render D1');
      return &lt;D2 /&gt;;
  });
  
  const App = () =&gt; {
      const [num, setNum] = useState(0);
  
      console.log('render App');
    return (
      &lt;div&gt;
        &lt;MyContext.Provider value={num}&gt;
          &lt;D1 /&gt;
        &lt;/MyContext.Provider&gt;
        &lt;input type='button' onClick={() =&gt; { setNum(Math.random()) }} /&gt;
      &lt;/div&gt;);
  };
  
  ReactDOM.render(&lt;App /&gt;, document.querySelector('#root'));
  </code></pre>
  <p>As I click the button, I can see my tiny number is changing. Also notice that <code>App</code> is rendered for each click while <code>D1</code>, <code>D2</code> are not. I understood the reason of this.</p>
  <p>But weird thing is, when button is clicked, <code>D3</code> hasn't been re-rendered! Still its content is changing. What happened exactly?</p>
  <p>Please check this for your convinient: <a href="https://jsfiddle.net/gfnuko/cs7jpo69/4/" rel="nofollow noreferrer">https://jsfiddle.net/gfnuko/cs7jpo69/4/</a></p>