render hooks パターンの素振り

以下の記事で紹介されている「render hooks パターン」がすごく良いなと思ったので、実際に業務で利用した構成を元に実装してみました。 最終的な実装 画像ファイルを指定すると、直下に画像のプレビューを表示するコンポーネントを作りました。 こちらを元に解説していきます。 パターンを使わない実装 以下はカスタムフックを利用せずに実装した例です。 <input type="file" />に入力があったのをhandleInput()で画像を data URL に変換しています。 import { useState } from "react"; export default function App() { const [value, setValue] = useState<string | null>(null); const handleInput = (changeEvent: R