【React】SetStateActionを用いて、setStateで変更前の値を利用する

import { useState } from 'react'
import Child from './Child'

export const Parent = () => {
  const [animalName, setAnimalName] = useState('dog')

  return (
    <>
      <div>animalName:{animalName}</div>
      {animalName === `pig` && <div>子コンポーネントで`pig`を設定しました</div>}
      <Child setAnimalName={setAnimalName} />
    </>
  )
}

export default Parent

import { Dispatch, SetStateAction, useEffect } from 'react'

type Props = {
  setAnimalName: Dispatch<SetStateAction<string>>
}

export const Child = ({ setAnimalName }: Props) => {
  useEffect(() => {
    const newAnimalName = `pig`
    setAnimalName((name: string) => name + newAnimalName)
  }, [])

  return <div>子コンポーネント</div>
}

export default Child

const newAnimalName = `pig`
setAnimalName((name: string) => name + newAnimalName)

const newAnimalName = 変更後の値
setState((変更前の値の変数名: 変更前の値の変数型) => 変更前の値の変数名 + 変更後の値)