Properly separate what changes and what doesn't change in your React code

import './styles.css'
import { useState } from 'react'

export default function App() {
  return (
    <ColorPicker>
      <p>Hello, world!</p>
      <ExpensiveTree />
    </ColorPicker>
  )
}

/**
 * https://overreacted.io/before-you-memo/
 * https://kentcdodds.com/blog/optimize-react-re-renders
 * https://twitter.com/sebmarkbage/status/1096115287781400576
 *
 * in here, children doesn't rerender because its the same between changes
 * children get diffed to decide whether or not to rerender
 * **** as long as children are referentially equal, they don't rerender ****
 *
 * if oldProps !== newProps
 * https://github.com/facebook/react/blob/d420d2ccb6223a66d5e8fe824ac0d31ed5bf87a1/packages/react-reconciler/src/ReactFiberBeginWork.js#L2571-L2575
 *
 * biggest lesson: separate what changes and what doesn't change, and you won't have rerendering issues
 */
function ColorPicker({ children }) {
  let [color, setColor] = useState('red')
  return (
    <div style={{ color }}>
      <input value={color} onChange={e => setColor(e.target.value)} />
      {children}
    </div>
  )
}

function ExpensiveTree() {
  let now = performance.now()
  while (performance.now() - now < 100) {
    // Artificial delay -- do nothing for 100ms
  }
  return <p>I am a very slow component tree.</p>
}