【React】useEffectでホットリロード時は期待する動作だが、ブラウザリロード時は違う

import { useEffect, useState } from 'react'
import Child from '../../components/hotReload/Child'

export const App = () => {
  const [greeting, setGreeting] = useState('hello')
  const [str, setStr] = useState('')

  useEffect(() => {
    if (str === 'goodbye') {
      const newGreeting = str
      setGreeting(newGreeting)
    }
  }, [str])
  //   }, []) // だとhot reload時にしか動かない

  return (
    <div>
      <p>{greeting}</p>
      <Child setStr={setStr} />
    </div>
  )
}

export default App

import { useEffect } from 'react'

type Props = {
  setStr: React.Dispatch<React.SetStateAction<string>>
}

export const Child = ({ setStr }: Props) => {
  useEffect(() => {
    const newStr = 'goodbye'
    setStr(newStr)
  }, [])

  return <div></div>
}

export default Child

  useEffect(() => {
    if (str === 'goodbye') {
      const newGreeting = str
      setGreeting(newGreeting)
    }
  }, []) // 正しく動作するものは }, [str])

  useEffect(() => {
    if (str === 'goodbye') {
      const newGreeting = str
      setGreeting(newGreeting)
    }
  }, [str])