Reactjs REACTION 18功能组件正在开发中的S

1、REACT 18开发文档有以下描述:

打开严格模式后，在开发过程中，Reaction会在实际设置之前额外运行一次安装和清理.

2、我有以下简单的代码

const GrandSon = () => {
  console.log('GrandSon')

  useEffect(() => {
    console.log('GrandSon mounted')
    return () => {
      console.log('GrandSon unmounted')
    }
  }, [])

  return <div>GrandSon</div>
}

const Son = () => {
  console.log('Son')

  useEffect(() => {
    console.log('Son mounted')
    return () => {
      console.log('Son unmounted')
    }
  }, [])

  return (
    <>
      <div>Son</div>
      <GrandSon />
    </>
  )
}

export default function App() {
  console.log('app')

  useEffect(() => {
    console.log('app mounted')
    return () => {
      console.log('app unmounted')
    }
  }, [])

  return (
    <div>
      <Son />
    </div>
  )
}

3、控制台将输出:

app
app
Son
Son
GrandSon
GrandSon
GrandSon mounted
Son mounted
app mounted
GrandSon unmounted
Son unmounted
app unmounted
GrandSon mounted
Son mounted
app mounted

4如我所料，、以下日志(log)输出

GrandSon mounted
Son mounted
app mounted
GrandSon unmounted
Son unmounted
app unmounted
GrandSon mounted
Son mounted
app mounted

但是我对开头部分有疑问

app
app
Son
Son
GrandSon
GrandSon

这是怎么发生的，请帮帮我！