前記事を書いていて関数のかわりにコンポーネントで渡すメリットもあるなと思ったので

まず前提ですが 関数を受け取り実行して結果を内部で使うコンポーネントがあります

const Component1 = ({ getValue }) => {
	const [state, setState] = useState()

	useEffect(() => {
		getValue().then(value => setState(value))
	}, [getValue])

	return (
		<div>{state}</div>
	)
}

const getValue = () => {
	return new Promise(resolve => setTimeout(resolve, 100, "VALUE"))
}

これの嫌なところは useEffect が入るところです

関数の代わりにコンポーネントで渡すと コンポーネントに渡した関数が呼び出されてイベントベースな動きにできます

const Component2 = ({ GetValue }) => {
	const [state, setState] = useState()

	return (
		<>
			<GetValue onValue={value => setState(value)} />
			<div>{state}</div>
		</>
	)
}

const GetValue = ({ onValue }) => {
	useEffect(() => {
		getValue().then(value => onValue(value))
	}, [])
	return null
}

GetValue の中に useEffect はありますが これはそれをするためだけのコンポーネントです
Component2 の中に useEffect が存在しなくなるのが良いところです

元の Component1 がほぼ何もしないコンポーネントなのでこれだとあまり違いは感じられませんが もっと色々し始めると useEffect での呼び出しが減るのは少し助かります