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

[yusufyunuskaymaz]

trafficstars

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