[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 文件、测试或具体的措辞更改，因此需要在实现之前就范围和验收标准达成一致。