[ReactDoc] React Hooks - 自訂 Hooks

本文章內容來自 React 官方文件 - Building Your Own Hooks

自訂的 Hooks 就是一個單純的 JavaScript 函式，它的名字會以 use 開頭，並可能會在其內部呼叫其他的 Hooks。

此外，當你多次使用同一個自訂的 Hooks 時，所有的狀態（state）和作用（effect）都是完全獨立的。

Sample Codes

回傳一個狀態的 Custom Hook

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

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

  return isOnline;
}

回傳 state 和 setState 方法的 Custom Hook

最後的地方 return [<state>, <setState>]

import { useState, useEffect } from 'react';
import axios from 'axios';

const useHackerNewsApi = () => {
  const [data, setData] = useState([]);
  const [queryString, setQueryString] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    console.log('useEffect');
    const fetchData = async () => {
      console.log('fetchData');
      setIsError(false);
      setIsLoading(true);

      try {
        const result = await axios(`https://hn.algolia.com/api/v1/search?query=${queryString}`);
        setData(result.data && result.data.hits.filter((item) => item.title));
      } catch (error) {
        setIsError(true);
      }
      setIsLoading(false);
    };
    fetchData();
  }, [queryString]);

  return [{ data, isLoading, isError }, setQueryString];
};

export default useHackerNewsApi;