再レンダリングを防ぐために子コンポーネントでconnectするべきか

Question

現在、Next.jsを基盤にreact-reduxで状態管理するアプリケーションを作成しています。

以下のコードについて説明いたします。

• Results.jsでstoreにconnectし、APIから取得済みのitemsを子コンポーネントであるListItem.jsを用いてリスト表示
• ListItemにある保存ボタンをクリックするとコールバック関数であるhandleClickを通じてtoggleBookmarkをdispatchし、itemのプロパティーであるis_bookmarked(Boolean)を変更する

// items

[
  {id: 1, title: 'title1', is_bookmarked: true},
  {id: 2, title: 'title2', is_bookmarked: false}
]

// components/molecules/ListItem.js

const ListItem = React.memo(({ item, handleClick }) => {
  return (
    <div>
      <p>{item.title}</p>
      <button onClick={handleClick}>
        {item.is_bookmarked ? '保存済み' : '保存する'}
      </button>
    </div>
  )
})

export default ListItem

// components/organisms/Results.js

const Search = ({ items, toggleBookmark }} => {
  return items.map(item => (
    <ListItem
      key={item.id}
      item={item}
      handleClick={() => toggleBookmark(item.id)}
    />
  ))
}

const mapStateToProps = (state) => ({
  items: state.classified.items,
})

const mapDispatchToProps = (dispatch) => {
  return {
    toggleBookmark: bindActionCreators(toggleBookmark, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Results)

// reducer.js

export default function reducer(state = [], action) {
  switch (action.type) {
    case actionTypes.TOGGLE_BOOKMARK:
      return {
        ...state,
        items: state.items.map(el => el.id === action.payload ? { ...el, is_bookmarked: !el.is_bookmarked } : el)
      }
    default:
      return state
  }
}

上記は可能な限りAtomic designに沿って作成したため、molecules内にあるListItemではロジックを記述せず、上層のorganismsにあるResultsにてconnect、またロジックの記述をしています。（説明のためatomsをmoleculesにまとめて記載、またcontainerとpresentationalに分けずまとめて記載しています）

この状態でreact devtoolsにあるHighlight Updateをチェックし、任意のListItemの保存ボタンをクリックすると、クリックされたボタンのあるコンポーネントだけでなく、それ以外の全てのListItemが再レンダリングされるのが確認できます。

ここで質問です。
0. クリックされたボタンのあるコンポーネントのみを再レンダリングしたい場合、どのような方法をとるべきなのでしょうか？
0. 上記の実装において問題点はありますか？

例えばResultsではなくListItemでconnectした場合は、当然ですがボタン押下時に対象のコンポーネントのみが再レンダリングされました。しかしAtomic Designの観点等からconnectするのはorganisms以上のコンポーネントでするべきだと認識しているので、それは避けたいです。

親コンポーネントでconnectし、そこからstateやコールバック関数を子コンポーネントに渡す限り、上記コードにおける親に付随する全子コンポーネントの再レンダリングは免れないのでしょうか？

Answer 1

クリックされたボタンのあるコンポーネントのみを再レンダリングしたい場合、どのような方法をとるべきなのでしょうか？

toggleBookmark自体を<ListItem>に渡してしまえば、関数の再生成という問題はありません。

Comments

[mickey]

ご回答ありがとうございます。
<ListItem key={item.id} item={item} toggleBookmark={toggleBookmark} />として
ListItemの方で、受け取ったtoggleBookmarkを使ってonClick={() => toggleBookmark(item.id)}するという理解で合っていますか？
こちらが合っていると仮定して試してみたのですがクリックされたコンポーネント以外も再レンダリングされました。なので私が回答を理解できていないと思いますので、もう少しだけ詳しくご教授願えますでしょうか？

[maisumakun]

toggleBookmark自体が変化し続けている、ということはありませんか？

（なお、onClick={() => toggleBookmark(item.id)}のようにJSX内に直接関数を書くと、毎回別インスタンスとなって再描画が必ず発生します）

[mickey]

toggleBookmarkは
export const toggleBookmark = (id) => async dispatch => {
return dispatch({ type: classifiedActionTypes.TOGGLE_BOOKMARK, payload: id })
}
タイプとitemのidを返す関数なのですが、こちらは変化し続けると捉えるべきでしょうか？

[hoshi-takanori]

横から失礼します。Search に渡る (そしてそのまま ListItem に渡す) toggleBookmark は、生の toggleBookmark ではなく、mapDispatchToProps の中で bindActionCreators されたものです。で、mapDispatchToProps の結果は connect の中でメモ化されるので、Search に渡る toggleBookmark は基本的に (dispatch が変わらない限り) 変化しないはずです。