React Hooksの概要

Hooksは、classを記述せずにstateやその他のReactの機能を使えるようにしたもので、今は提案段階です。RFCはこちら

現在はReact v16.7.0-alphaで試せます。

Hooks導入の動機はこちら
https://qiita.com/tatane616/items/9d667e32b6f82f9f7a9f

State Hook

よくあるボタンを押すとカウントが増えていくサンプルです。

import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

この中のuseStateがHookです。
関数コンポーネントの中でもローカルステートを利用できるようにしたもので、現在のstateとstateを更新する関数の2つを返します。
古いstateと新しいstateを一緒にマージしないと言う点をのぞいて、classのthis.stateに似ています。

useStateの引数の0は初期値で、this.stateとは違いオブジェクトである必要はありません。

State　Hookは1つのコンポーネントで複数利用でき、その場合は次のように記述します。

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

Hooksは、stateやライフサイクルメソッドを関数コンポーネントから利用する機能で、class内では機能しません。

Effect Hook

useEffectは関数コンポーネントで副作用を実装できるようにしたHooksで、データをフェッチしてきたり、DOMをいじったりなど今までclass内のcomponentDidMount,componentDidUpdate,componentWillUnmountでやってきたロジックを単一のAPIに統合すると言うもの。

DOMのアップデート後にtitleを変えるサンプル

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Effectsはコンポーネント内で宣言され、propsやstateにアクセスが可能。デフォルトでは、初回を含むレンダリングのたびに実行されます。

Effectsでは、任意で関数を返すことによってどのようにクリーンアップするかを指定することもできます。
次のコードは、友人のオンラインステータスをsubscribeし、のちにunsubscribeするサンプルです。

import { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);

    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

この例では、コンポーネントがアンマウントされる時や再レンダリングでEffectが実行される時にChatAPIをunsubscribeします。

useStateと同様に、Effectも1つのコンポーネントに複数宣言することができます。

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }
  // ...

Hooksのルール

HooksはJSの関数ですが、2つのルールがあります。

• トップレベルでのみ呼び出す。ループやifなどの条件文、ネストされた関数の中で呼び出してはいけない。
• Reactの関数コンポーネントでのみ呼び出す。普通のJSの関数で呼び出してはいけない。

Custom Hooks

ステートを持ったロジックをコンポーネント間で再利用したい時は、今まではHOCやrender propsで解決していたと思いますが、Custom Hooksを使うことでツリーに余計なコンポーネントを追加せずに実装することができます。

先ほどのオンラインステータスのコードを例に見ていきましょう。
これらのロジックをuseFriendStatusと言うHookに抽出します。

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

friendIDを引数にとって、友人がオンライン状態かどうかを返します。

このCustom Hooksは以下のように利用することができます。

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

上記のコンポーネントのstateはそれぞれ独立しています。Hooksはステートフルなロジックを再利用するもので、それ自体がstateを持つわけではありません。

関数の名前をuseから始めることで、それを他のコンポーネントから呼んだ際にCustom Hookと言うことができます。
useSomethingと言う名前は、リンタープラグインなどでHooksを利用したコードでのバグを見つけることなどに役立ちます。

Other Hooks

他にもuseContextやuseReducerといった便利なHooksがあります。

useContextは、ネストすることなくReact Contextを利用することができます。

function Example() {
  const locale = useContext(LocaleContext);
  const theme = useContext(ThemeContext);
  // ...
}

useReducerは複雑なコンポーネントでのローカルステートをreducerを使って管理できるようになります。

function Todos() {
  const [todos, dispatch] = useReducer(todosReducer);
  // ...

Hooks API reference