One simple trick to optimize React re-renders [https://kentcdodds.com/blog/optimize-react-re-renders]

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Logger(props) {
  console.log(`${props.label} rendered!`)
  return null
}

function Counter(props) {
  const [ count, setCount ] = React.useState(0)

  const increment = () => setCount(c => c + 1)

  return (
    <React.Fragment>
      <button onClick={increment}>THIS IS CURRENT COUNT: {count}</button>
      {props.logger}
    </React.Fragment>
  )
}

ReactDOM.render(
  <Counter logger={<Logger label="counter" />} />,
  document.getElementById('root')
);