PureComponentのpropとしてコールバック関数を渡したい

Question

React.jsのレンダリングを効率化する方法としてPureComponentがありますが、PureComponentへrenderの際に使うコールバック関数を渡すとしたら、正常に動かすのが難しいのではないかと考えています。

例えば「あるエレメント群のclassNameを生成する関数」をPureComponentが受け取れるようになっていた場合、関数が純粋ならそれで問題ないのですが、関数があるオブジェクトにbindされたメソッドで、そのオブジェクトの状態に応じて返り値が変化するようになっていると、関数自身は変化しないのでPureComponentの再renderは不要と判断されるものの、実際には状態変化しているので再描画しないと整合しない、ということが考えられます。

ひとまず正常動作させるために「PureComponent化を諦める」や「オブジェクトの状態変化に合わせて関数自体を.bindするなどで強制的に状態変化させる」というような方法を思いつきましたが、もっとエレガントな対応法はないでしょうか。

（ParentComponent内で生成された複数の値をmapしてChildComponentを生成していて、「ChildComponentで使う、それぞれの値に応じたclassNameを生成する関数」をParentComponentの外側から渡してChildComponentまで引き回している、という状況です。汎用性を高めるためにこのような構造をとっています）

環境

• React 16.6
• 対象ブラウザ: IE11、各種モダンブラウザ
• Redux、SSRなどは未使用

Comments

[Meganezaru]

理解できていなかったら、ごめんなさい・・・
PureComponentにかかわらず、ChildComponent自身のpropsかstateに変化が起こらなければ、renderはコールされないと思うのですが、ここでいうコールバックは、renderから呼び出されて、classNameを返すものなのですよね？もしそうであれば、外部のオブジェクトが変化したことを伝えるpropsが必要なのかも。
いや・・・そんな単純なことを聞きたいんではないですよね・・・PureComponentじゃなければ、動作してるってことなんですよね？(;'∀')
的外しだったらすいません・・・スルーで。

Answer 1

結局、React Hooksで作れば、「ある関数が依存する変数の更新に合わせて関数を再作成する」形に自然となるので、問題が自然解決することに気づきました。

function FunctionProvidingComponent(props){
  const [keys, setKeys] = useState({});

  // keysを見てclassNameを返す関数
  const getClassName = useCallback(() => {
    // keysを使った判定処理（略）
  }, [keys]);

  return <ChildComponent classNameCallback={getClassName} />
}

Answer 2

ParentComponent内で生成された複数の値をmapしてChildComponentを生成していて、「ChildComponentで使う、それぞれの値に応じたclassNameを生成する関数」をParentComponentの外側から渡してChildComponentまで引き回している、という状況

具体的にどういった状況かコードレベルで確認したく、こちらのコードをこちらで共有いただくことは可能ですか？

maisumakunさんの状況に適してるかは分からないのですが、ChildComponentに対してclassName自体をstringのpropsで渡すという方法は可能ですか？