[Suggestion]: Alternative Approach for Managing State with Event Handlers

Summary

In some cases, React documentation suggests using a chain of useEffect hooks to manage state updates when synchronizing with network requests. However, it is also possible to handle these scenarios using event handlers effectively.

Page

https://react.dev/learn/you-might-not-need-an-effect#sharing-logic-between-event-handlers

Details

Hi,

In the documentation, it states: "In some cases, you can’t calculate the next state directly in the event handler. For example, imagine a form with multiple dropdowns where the options of the next dropdown depend on the selected value of the previous dropdown. Then, a chain of Effects is appropriate because you are synchronizing with network." However, when properly structured, it is also possible to manage these scenarios using event handlers.

For example, in the following setup, we can handle dropdown changes and asynchronous data updates using event handlers:

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

export default function CascadingDropdowns() {
  const [countries, setCountries] = useState([]);
  const [cities, setCities] = useState([]);
  const [regions, setRegions] = useState([]);

  const [selectedCountry, setSelectedCountry] = useState('');
  const [selectedCity, setSelectedCity] = useState('');

  useEffect(() => {
    async function fetchCountries() {
      const response = await fetch('/api/countries'); // Example API call
      const data = await response.json();
      setCountries(data);
    }
    fetchCountries();
  }, []);

  const handleCountryChange = async (event) => {
    const country = event.target.value;
    setSelectedCountry(country);
    setSelectedCity('');
    setCities([]);
    setRegions([]);
    if (country) {
      const response = await fetch(`/api/cities?country=${country}`);
      const data = await response.json();
      setCities(data);
    }
  };

  const handleCityChange = async (event) => {
    const city = event.target.value;
    setSelectedCity(city);
    setRegions([]);
    if (city) {
      const response = await fetch(`/api/regions?city=${city}`);
      const data = await response.json();
      setRegions(data);
    }
  };

  return (
    <div>
      <div>
        <label>Country:</label>
        <select value={selectedCountry} onChange={handleCountryChange}>
          <option value="">Select Country</option>
          {countries.map((country) => (
            <option key={country.id} value={country.name}>
              {country.name}
            </option>
          ))}
        </select>
      </div>

      <div>
        <label>City:</label>
        <select value={selectedCity} onChange={handleCityChange} disabled={!selectedCountry}>
          <option value="">Select City</option>
          {cities.map((city) => (
            <option key={city.id} value={city.name}>
              {city.name}
            </option>
          ))}
        </select>
      </div>

      <div>
        <label>Region:</label>
        <select disabled={!selectedCity}>
          <option value="">Select Region</option>
          {regions.map((region) => (
            <option key={region.id} value={region.name}>
              {region.name}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}

This approach demonstrates how to manage asynchronous data updates using event handlers, and it may be more suitable in certain situations.
Thanx
Yusuf Kaymaz

從連結的「You Might Not Need an Effect」頁面開始，尤其是「Sharing Logic Between Event Handlers」，並將其中的指引與 issue 中的 cascading-dropdown 範例進行比較。該 issue 沒有指定 repository 檔案、測試或具體的措辭變更，因此需要在實作之前就範圍和驗收標準達成共識。