Как обновляются пользовательские хуки?

Question

Я создаю два выпадающих компонента, используя пользовательский хук useDropdown(), один для животного и другой для пород.

Я не совсем понимаю, как обновляется второй выпадающий список <BreedDropdown/>с новыми породами, как животное меняется. Другими словами, кто является ответственным за повторный вызов пользовательского хука для возврата нового выпадающего списка?

const [breeds, setBreeds] = useState([]);
const [animal, AnimalDropdown] = useDropdown("Animal", "dog", ANIMALS);
const [breed, BreedDropdown, setBreed] = useDropdown("Breed", "", breeds);

useEffect(() => {
  setBreeds([]);
  setBreed("");

  pet.breeds(animal).then(({ breeds }) => {
    const breedStrings = breeds.map(({ name }) => name);
    setBreeds(breedStrings);
  }, console.error);
}, [animal, setBreeds, setBreed]);
return (
  <div className="search-params">
    <h1>{animal}</h1>
    <form action="">
      <AnimalDropdown />
      <BreedDropdown />
      <button>Submit</button>
    </form>
  </div>
);

Редактировать: реализация для пользовательского хука.

import React, { useState } from "react";

const useDropdown = (label, defaultState, options) => {
  const [state, setState] = useState(defaultState);
  const id = `use-dropdown-${label.replace(" ", "").toLowerCase()}`;
  const Dropdown = () => (
    <label htmlFor={id}>
      {label}
      <select
        id={id}
        value={state}
        onChange={e => setState(e.target.value)}
        onBlur={e => setState(e.target.value)}
        disabled={options.length === 0}
      >
        <option>All</option>
        {options.map(item => (
          <option key={item} value={item}>
            {item}
          </option>
        ))}
      </select>
    </label>
  );
  return [state, Dropdown, setState];
};

export default useDropdown;

Answer 1

Меня смущает, как второй выпадающий список обновляется новыми породами по мере изменения животного.

Пока мы не можем знать, как реализован пользовательский хук useDropdown,из вашего кода это происходит из-за перехвата useEffect, вы вызываете setBreed в функции обратного вызова при animal изменении:

useEffect(() => {
  ...
  setBreed('');

  ...
}, [animal, setBreeds, setBreed]);

Кто отвечает за повторный вызов пользовательского перехватчика, чтобыновый выпадающий список будет возвращен?

Это зависит от реализации пользовательского хука.