Избегание нескольких вызовов API, когда один и тот же компонент отображается несколько раз

Question

Я сделал компонент реагирующего выпадающего списка, используя крючки. В крюке useEffect я вызываю API, чтобы получить все варианты. Как я могу избежать нескольких вызовов API, когда выпадающий список вызывается несколько раз в списке. Структура кода

const Dropdown = ({ handleChange }) => {
const [options, setOptions] = useState([]);

useEffect(() => {
//api call and setOptions
}, []);

return (
<Form.Dropdown name="abcd" label="abcd" options={options} onChange={handleChange} />
);
};

export default Dropdown;

Я знаком с Redux и немного с Rx js.

Answer 1

Простой сценарий, о котором я думаю, это не нажимать API, когда опции уже загружены. Вы можете сделать что-то вроде:

const Dropdown = ({ handleChange }) => {
const [options, setOptions] = useState([]);

useEffect(() => {
  if(!options.length){
     //api call and setOptions
  }
}, []);

return (
  <Form.Dropdown name="abcd" label="abcd" options={options} onChange={handleChange} />
  );
};

export default Dropdown;

Надеюсь, это работает для вас.