react re-render test for children prop

test.tsx

import { memo, useState, useMemo } from 'react'

const MODE = 'memo'

function MiddleRaw({ children }) {
  console.log('middle')
  return <div>{children}</div>
}
const Middle = memo(MiddleRaw)

function ChildRaw() {
  console.log('child')
  return <div>I am child</div>
}
const Child = memo(ChildRaw)

export default function App() {
  const [count, setCount] = useState(0)
  console.log('app')

  const memoizedChildren = useMemo(
    () => (
      <Middle>
        <Child />
      </Middle>
    ),
    [],
  )

  // logs "app", "middle", "child" on every re-render
  if (MODE === 'plain') {
    return (
      <div className="App">
        <button onClick={() => setCount(count + 1)}>count up</button>
        <MiddleRaw>
          <ChildRaw />
        </MiddleRaw>
      </div>
    )
  }

  // logs "app", "middle" on every re-render
  if (MODE === 'memo') {
    return (
      <div className="App">
        <button onClick={() => setCount(count + 1)}>count up</button>
        <Middle>
          <Child />
        </Middle>
      </div>
    )
  }

  // logs "app" on every re-render
  if (MODE === 'useMemo') {
    return (
      <div className="App">
        <button onClick={() => setCount(count + 1)}>count up</button>
        {memoizedChildren}
      </div>
    )
  }

  return null
}