JSFiddle - React, Tailwind, and code Playground

by coktopus

HTML

<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>

Babel + JSX

const Panel1 = React.memo(({list}) => {
         console.log('Panel1 re-render...', list);
        return <React.Fragment/>
})
const Panel2 = ({arr}) => <Panel1 list={arr}/>
const Panel3 = () => {
	const [count, setCount] = React.useState(0);
  const arr = (React.useCallback(()=>{
  return []
  }, []))()
  console.log(arr, 'arr')
  return (
  	<div>
      <button onClick={() => setCount(count + 1)}>
      Click me
      </button>
      <Panel2 arr={arr} />
  	 </div>
    )
}

class App extends React.Component {
  
  render() {
  	return (
    	<div>
    	  <h1>Test React.memo</h1>
        <Panel3/>
    	</div>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('container'));