useEffect – Weather Fetcher

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

function WeatherFetcher() {
  const [city, setCity] = useState('Jakarta');
  const [weather, setWeather] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!city) return;

    setLoading(true);
    fetch(`https://api.open-meteo.com/v1/forecast?latitude=-6.2&longitude=106.8&current_weather=true`)
      .then(res => res.json())
      .then(data => {
        setWeather(data.current_weather);
        setLoading(false);
      });
  }, [city]);

  const handleSearch = () => {
    setCity(city); // trigger useEffect karena [city] berubah
  };

  return (
    <div>
      <h1>Weather Info</h1>
      <input value={city} onChange={(e) => setCity(e.target.value)} />
      <button onClick={handleSearch}>Search</button>

      {loading ? (
        <p>Loading...</p>
      ) : weather ? (
        <div>
          <p>Temperature: {weather.temperature}°C</p>
          <p>Wind Speed: {weather.windspeed} km/h</p>
        </div>
      ) : (
        <p>No data</p>
      )}
    </div>
  );
}

• useEffect(..., [city]) akan dijalankan setiap kali nilai city berubah.
• Digunakan untuk fetch data dari API cuaca.
• Sangat cocok untuk side-effect: fetch, setTimeout, update DOM, dll.