componentDidUpdateでContextの変化を見たい

って思うじゃないですか。

github.com

今のところは、公式な手段はなさそうです。こちらのissueにあるようにcontextの値をpropsにぶち込む何かを使ってどうにかする必要があります。

私はたいていcontextのvalueがobjectなので、指定したkeyについてpropsに流すようなHOCを作りました。もうJSer界隈ではオワコンみたいな感じの悲しい扱いを受けているrecomposeを使うと下記のようにclassの先頭にdecorator形式で書くことが可能です。decoratorを使うにはbabelのプラグインをなんやかんやする必要が今の所あります多分。あと、下記は楽に書くためlodashのpick関数を使っています。

import { Component } from 'react';
import { compose } from 'recompose';
import _ from 'lodash';

const bindContextToProps = (context, ...keys) =>
  compose((Base) => {
    return (props) => {
      const obj = React.useContext(context);
      return <Base {..._.pick(obj, keys)} {...props} />;
    };
  });

// 適当なContext
const SomeContext = React.createContext({ foo: 1, bar: 2, baz: 3 });

@bindContextToProps(SomeContext, 'foo', 'bar')
class YourComponent extends Component {
  render() {
    const { foo, bar } = this.props;
    return (
       <span>foo: {foo}, bar: {bar}</span>
    );
  }
}

とりあえずこれで凌げる。来年この記事を見たらきっと間違ったソリューションになっているだろう。