React Hooksを使ったローディングスピナーの実装方法

Reactを使ったアプリケーションでは、データの取得や処理に時間がかかる場合があります。その際、ユーザーに待機中であることを示すためにローディングスピナーを表示することがあります。今回は、React Hooksを使って簡単にローディングスピナーを実装する方法について紹介します。

useStateを使ったローディングスピナーの実装

まず、useStateを使ってローディング状態を管理するためのstateを定義します。

import React, { useState } from 'react';

function App() {
  const [loading, setLoading] = useState(false);

  return (
    <div>
      {loading ? <div>ローディング中...</div> : <div>コンテンツが表示されます。</div>}
    </div>
  );
}

export default App;

このように、useStateを使ってloadingというstateを定義し、初期値をfalseに設定しています。そして、ローディング中はloadingがtrueになるように条件分岐を行い、ローディング中のメッセージを表示します。

useEffectを使ったローディングスピナーの実装

次に、useEffectを使ってAPIからデータを取得する際にローディングスピナーを表示する方法について紹介します。

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

function App() {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);

  useEffect(() => {
    setLoading(true);
    fetchData().then((data) => {
      setData(data);
      setLoading(false);
    });
  }, []);

  const fetchData = async () => {
    const response = await fetch('https://example.com/data');
    const data = await response.json();
    return data;
  };

  return (
    <div>
      {loading ? <div>ローディング中...</div> : <div>{data}</div>}
    </div>
  );
}

export default App;

このように、useEffectを使ってAPIからデータを取得する際に、fetchData関数内でローディング状態をtrueに設定し、データを取得したらローディング状態をfalseに戻します。そして、ローディング中はloadingがtrueになるように条件分岐を行い、ローディング中のメッセージを表示します。

まとめ

React Hooksを使って簡単にローディングスピナーを実装する方法について紹介しました。useStateを使ってローディング状態を管理し、条件
分岐で表示する方法や、useEffectを使ってAPIからデータを取得する際にローディングスピナーを表示する方法を紹介しました。これらの方法を組み合わせることで、Reactアプリケーションでスムーズなユーザー体験を実現することができます。

ただし、ローディングスピナーを使いすぎると、ユーザーにとって不快な体験となる場合があります。適切なタイミングで表示するように注意しましょう。

以上が、React Hooksを使ったローディングスピナーの実装方法についての紹介でした。