これは React Advent Calendar 2023 の 17 日目の記事です。 TL;DR 次のように表示用データの生成ロジックをカスタムフックに閉じ込め、コンポーネントを非常に薄く作る。 function usePresenter(props: Props) { const retrieveDetails = useRetrieveDetails(); const [isLoaded, setIsLoaded] = useState(false); const handleTap = useCallback(async () => { if (!isLoaded) { await retrieveDetails() setIsLoaded(true) } }) return useMemo(() => { nickname: buildNickname(props), acti