🕶️

useEffectを薄いコンポーネントに閉じて「"use client"汚染」を防ぐテク

2024/06/21に公開

ReactでaddEventListenerするときにカスタムフックじゃなくて薄いコンポーネントにするデザインあって、これまではほぼ好みの問題だったけれど、RSCの登場で「“use client”をそこで閉じることができる」っていう明確な優位性が生まれた。

たとえば単に

useKeyDown({"K": listener})

を呼ぶと、呼び出し先のコンポーネントにまで「“use client”汚染」があるが

// 中身はuseKeyDownを呼んで return <></> するだけ
<KeybordShortcutRegistrar keyBindings={{"K": listener}} />  

で呼べると、“use client”KeybordShortcutRegistrarに閉じることができる。

株式会社ゆめみ

Discussion