JSFiddle - React, Tailwind, and code Playground

HTML

<div id="root">
</div>

React

// alias
const useState = React.useState;
const useEffect = React.useEffect;

const MyContext = React.createContext(0);

const D3 = () => {
	console.log('render D3');
	return <MyContext.Consumer>{num => {console.log('CONSUMER'); return num; }}</MyContext.Consumer>;
};

const D2 = React.memo(() => {
	console.log('render D2');
	return <D3 />;
});

const D1 = React.memo(() => {
	console.log('render D1');
	return <D2 />;
});

const App = () => {
	const [num, setNum] = useState(0);

	console.log('render App');
  return (
  	<div>
      <MyContext.Provider value={num}>
        <D1 />
      </MyContext.Provider>
      <input type='button' onClick={() => { setNum(Math.random()) }} />
    </div>);
};

ReactDOM.render(<App />, document.querySelector('#root'));