reactのcomponentWillMountの代替方法とhooksでの書き方

Question

reactのcomponentWillMountが廃止されると聞きましたが、その代替を調べても「もう使用しない」としか出てこなくて、componentWillMountと同じようにコンポーネント作成前の処理をしたいときはどうすればよいのでしょうか。
また、componentWillMountと同じ処理をhooksで関数コンポーネントで書くにはどうすればよいのでしょうか。
下記のようにユーザー認証をしてから、未認証ならログイン画面へ、認証済みなら目的のコンポーネントにルーティングされるようにしています。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      authenticated: false,
      user: null
    }
  }

  componentWillMount() {
    firebase.auth().onAuthStateChanged(user => {
      if(user) {
        this.setState({
          authenticated: true,
          currentUser: user,
          loading: false
        });
      } else {
        this.setState({
          authenticated: false,
          currentUser: null,
          loading: false
        })
      }
    })
  }

Answer 1

componentWillMountと同じようにコンポーネント作成前の処理をしたいときはどうすればよいのでしょうか。

コンストラクタもしくはcomponentDidMountで実行してください。

Comments

[maisumakun]

関数コンポーネントで今回のような非同期処理を行う場合、useEffectの使い方で「初回1回だけ」の実行が可能です。

[omyu]

今回、私が作っているアプリではcomponentWillMountをcomponentDidMountに変えても同じような挙動をするのですが、今までのcomponentWillMountはすべてcomponentDidMountに代替できるのでしょうか。

[maisumakun]

同期的に処理したいものはそうも行かないので、クラスコンポーネントでしたらコンストラクタに、関数コンポーネントの場合は関数直書き（あるいはuseMemo、useStateなど）にして処理する必要があります。

[omyu]

わかりました。
ありがとうございます！

Answer 2

hookで対応するならuseEffectの第二引数に[]を指定して使用すればOKだと思います。
どうしても描画前に認証チェックをしたい場合は、認証情報をチェックするHOCを作って、そこにAppを渡すような作りにした方がいいです。

Comments

[omyu]

ありがとうございます。
描画前の認証チェックもやり方はあるけど、componentWillMountと同じような関数が元から与えられているわけではなくなったという認識でよいのでしょうか。

[nekoniki]

ご認識の通りです。
同じ動きを再現するには多少工夫が必要です。

[omyu]

そういうことだったんですね！
ご回答ありがとうございました。