A trick to detect re-renders in React

component.js

// Add a random background to the component
// On a re-render, the component gets a new color
// Source of this snippet: https://kyleshevlin.com/using-react-memo-to-avoid-unnecessary-rerenders

const random255 = () => Math.floor(Math.random() * 255)
const randomRGBA = () => {
  const r = random255()
  const g = random255()
  const b = random255()

  return `rgba(${r}, ${g}, ${b}, 0.3)`
}

function Profile({ name, location }) {
  return (
    <div style={{ backgroundColor: randomRGBA() }}>
      <div>{name}</div>
      <div>{location}</div>
    </div>
  )
}

const MemoizedProfile = React.memo(Profile)