React Hooks + router + TypeScript + Firebaseでログイン認証画面

React16.8のHooksについて

ReactはClassよりFunctionComponentのほうがコード少なくて好きやけどstateが使えなかったが、
いつのまにか使えるようになってたのでログイン画面を置き換えてみたらスッキリした

できあがり

App.tsx

import React, { useState, useEffect } from 'react';
import {
  BrowserRouter, Route, Switch, Redirect,
} from 'react-router-dom';
import { LinearProgress } from '@material-ui/core';
import SignIn from './pages/signin';
import SignUp from './pages/signup';
import Dashboard from './pages/dashboard';
import firebase from './components/firebase';
import './App.css';

type FirebaseUser = firebase.User|null

const App:React.FC = () => {
  const [authUser, setAuthUser] = useState<FirebaseUser>(null);
  useEffect(() => {
    firebase.auth().onAuthStateChanged((user) => {
      setAuthUser(user);
    });
  });
  return (
    <BrowserRouter>
      <div className="App">
        <Switch>
          <Route exact path="/signin" render={() => <SignIn authUser={(user:FirebaseUser) => setAuthUser(user)} />} />
          <Route exact path="/signup" component={SignUp} />
          <Route exact path="/" component={authUser ? Dashboard : LinearProgress} />
          <Route render={() => <Redirect to="/signin" />} />
        </Switch>
      </div>
    </BrowserRouter>
  );
};

useState

this.state,setStateの置き換え。

認証済みなら更新されたauthUserを元にログイン認証先に遷移できるようになる。

useEffect

componentDidMount,componentDidUpdate,componentWillUnmountの置き換え。
ここでfirebase.auth().onAuthStateChanged()を呼び出しauthUserが更新される。