Managing Loading and Error States

⏳ Managing Loading and Error States in a Weather App

When building a weather app, one of the most critical parts of the user experience is handling loading and error states effectively. Whether fetching data for a new city or refreshing weather information, your app should clearly communicate what’s happening. Let’s see how to handle this gracefully in React! ⚡🌤️

🎯 Why It's Important

• 🧠 Prevents confusion during API calls
• 📶 Handles no internet or API errors gracefully
• 🎯 Keeps the UI responsive and user-friendly

⚙️ State Setup

For a weather-fetching component, you’ll typically manage these three states:

const [weather, setWeather] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

📡 Fetching Weather Data with Status Feedback

Here’s a simple function to fetch weather for a searched city:

const fetchWeather = async (city) => {
  setLoading(true);
  setError(null);

  try {
    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY&units=metric`
    );

    if (!response.ok) {
      throw new Error("City not found or API error");
    }

    const data = await response.json();
    setWeather(data);
  } catch (err) {
    setError(err.message);
    setWeather(null);
  } finally {
    setLoading(false);
  }
};

🔁 Displaying States in UI

In the JSX, conditionally render UI based on state:

<div>
  <SearchBar onSearch={fetchWeather} />

  {loading && <p>🔄 Fetching weather data...</p>}

  {error && <p className="text-red-600">❌ {error}</p>}

  {weather && (
    <WeatherDisplay data={weather} />
  )}
</div>

🎨 Improve UX with Loaders and Alerts

• ⏳ Use a spinner or animated icon for loading
• ⚠️ Show red alert or toast for errors
• ✅ Once loaded, fade in the data with transitions

🔁 Retry Button on Error

Allow users to retry fetching after an error:

{error && (
  <div>
    <p>❌ {error}</p>
    <button onClick={() => fetchWeather(lastSearchedCity)} className="bg-blue-500 text-white p-2 mt-2">
      🔁 Retry
    </button>
  </div>
)}

💡 Optional: Custom Hook for Cleaner Code

You can abstract loading/error/weather logic using a custom hook:

function useWeather() {
  const [weather, setWeather] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchWeather = async (city) => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(`API_URL?q=${city}`);
      if (!res.ok) throw new Error("City not found");
      const data = await res.json();
      setWeather(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return { weather, loading, error, fetchWeather };
}

🧠 Best Practices

• 📛 Never leave the user in a blank state
• 🔄 Use transitions or spinners while waiting
• 🎯 Provide clear and helpful error messages
• 🧼 Clear error after retry or success

📋 Summary

• ✅ Managed loading, error, and data states
• ✅ Displayed UI feedback for all states
• ✅ Included retry logic and user-friendly messaging
• ✅ Created reusable structure with a custom hook

🚀 Final Thoughts

Weather apps rely on third-party APIs, which means failure and wait times are inevitable. A smooth experience comes down to how well your app communicates that delay or failure. With proper handling of loading and error states, your app can feel fast and reliable even when the network isn’t. 💪🌐