[React] リストアイテムに対するバケツリレーを recompose を使って軽減する

Before

const Menu = ({ currentUserId, currentLocation, title, path }) => (...)

const MenuBlock = ({ currentUserId, currentLocation }) => (
  <MenuList>
    <Menu
      currentUserId={currentUserId}
      currentLocation={currentLocation}
      title="ホーム"
      path="/home"
    />
    <Menu
      currentUserId={currentUserId}
      currentLocation={currentLocation}
      title="お知らせ"
      path="/notifications"
    />
    <Menu
      currentUserId={currentUserId}
      currentLocation={currentLocation}
      title="設定"
      path="/setting"
    />
  </MenuList>
)

After

基本形

import { withHandlers } from 'recompose'

const Menu = ({ currentUserId, currentLocation }) => ({ title, path }) => (...)

const MenuBlock = withHandlers({ Menu })(({ Menu }) => (
  <MenuList>
    <Menu title="ホーム" path="/home" />
    <Menu title="お知らせ" path="/notifications" />
    <Menu title="設定" path="/setting" />
  </MenuList>
))

注意: displayName にこだわる場合は適宜関数に名前つけるなどしてください

pure を付与したい場合

import { withHandlers } from 'recompose'

const Menu = pure(({ currentUserId, currentLocation, title, path }) => (...))

const MenuBlock = withHandlers({
  Menu: (parentProps) => (props) => <Menu {...parentProps} {...props} />,
})(({ Menu }) => (
  <MenuList>
    <Menu title="ホーム" path="/home" />
    <Menu title="お知らせ" path="/notifications" />
    <Menu title="設定" path="/setting" />
  </MenuList>
))

できれば withHandlers の中で引数が分かれたまま pure() を当てたかったんですが， recompose の仕様上pureによって作られたクラスを関数として呼んでしまうことによりエラーが発生するので，こうするしかないみたいです。