React 初心者の難問、カスタムフック（Custom Hook）を解説します

ARANK

最近社内レビュー会で React レビューが多くなり、「カスタムフック使ったらスッキリできます」という言葉もよく聞くようになりました。私が初めてそれを耳にしたときは「なにそれ美味しいの？」みたいな感じでしたし、初心者にはピンとこない概念かなーと思いましたので、今回のテーマにしたいと思います。1. カスタムフックとはカスタムフックは自分がカスタムして作るフックです。React 公式サイトではカスタムフックをこう説明してます。カスタムフックとは、名前が ”use” で始まり、ほかのフックを呼び出せる JavaScript の関数のことです。でもこれだけ見たら絶対わからないと思うのでサンプルコートを一緒に見てみましょう。2. チャットアプリの例サンプルコートも React 公式サイトにあるものを持ってきました。チャットアプリで友達がオンラインかオフラインかを示すメッセージを返すコンポーネントです。import React, { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } …