はじめに

カスタムフックを用いてHooksを複数用いている処理を別途切り離してみたので備忘録として残します。

カスタムフックとは

以下2つの記事がとても分かりやすかったです。

サンプルコード

●カスタムフック側

export const useData =() => {
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState<Array<Data>>();

    const getData = useCallback(() => {
        setLoading(true);
        axios
            .get<Array<Data>>(`${commonData.baseUrl}/api/data`)
            .then((response) => setData(response.data))
            .catch((response) => {console.log(response)})
            .finally(() => setLoading(false))
    },[data]);
    return { getData, loading, data, setData }
}

●呼び出し側

import { useData } from 'useData'

export const Index: FC = memo(() => {
    const { getData, loading, data, setData } = useData();
    useEffect(() => getData(), []);
    // 以降で取得したDataを利用
})