React

by Niels Krijger

HTML

<div id="app"></div>

React

let renderCount = 0;

const Component = ({ myHandler, count }) => {
  const ref = React.useRef();

	renderCount += 1;
  React.useEffect(() => {
    if (ref.current !== myHandler) {
      console.log('myHandler has changed');
    } else {
      console.log('myHandler has NOT changed');
    }
    ref.current = myHandler;
  }, [myHandler]);
  
  console.log('renderCount', renderCount)
  return (
     <div>
        Count: {count}
     </div>
  );
}

Component.defaultProps = {
  myHandler: () => {}
}

const App = props => {
  const [count, setCount] = React.useState(0);
  
  setTimeout(() => {
     setCount(prev => prev + 1);
  }, 2000);
  
	return (
    <div>
	    <Component count={count} />
    </div>
  );
};

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