🕶️
useEffectを薄いコンポーネントに閉じて「"use client"汚染」を防ぐテク
ReactでaddEventListenerするときにカスタムフックじゃなくて薄いコンポーネントにするデザインあって、これまではほぼ好みの問題だったけれど、RSCの登場で「“use client”をそこで閉じることができる」っていう明確な優位性が生まれた。
たとえば単に
useKeyDown({"K": listener})
を呼ぶと、呼び出し先のコンポーネントにまで「“use client”汚染」があるが
// 中身はuseKeyDownを呼んで return <></> するだけ
<KeybordShortcutRegistrar keyBindings={{"K": listener}} />
で呼べると、“use client”はKeybordShortcutRegistrarに閉じることができる。
Discussion