[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

Beginnen Sie mit der verlinkten Seite „You Might Not Need an Effect“, insbesondere mit „Sharing Logic Between Event Handlers“, und vergleichen Sie deren Hinweise mit dem cascading-dropdown-Beispiel im Issue. Das Issue nennt keine Repository-Datei, keinen Test und keine konkrete Änderung der Formulierung; daher müssten Umfang und Akzeptanzkriterien vor der Implementierung vereinbart werden.