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