reactjs - 取得した結果をコンポーネントに記憶する

Question

アイテムに画像を追加するコンポーネントに取り組んでいます。独自の画像をアップロードするか、アイテムの名前に基づいて API から読み込まれた画像を選択できます。

ルート コンポーネントは次のとおりです。

const AddMedia = (props) => {
  const [currentTab, setCurrentTab] = useState(0);
  const [itemName, setItemName] = useState(props.itemName);

  return (
    <div>
      <Tabs
        value={currentTab}
        onChange={() => setCurrentTab(currentTab === 0 ? 1 : 0)}
      />
      <div hidden={currentTab !== 0}>
        <FileUpload />
      </div>
      <div hidden={currentTab !== 1}>
        {currentTab === 1 && <ImagePicker searchTerm={itemName} />}
      </div>
    </div>
  );
};

そして、ここにある<ImagePicker />：

import React, { useState, useEffect } from "react";

function ImagePicker({ searchTerm, ...props }) {
  const [photos, setPhotos] = useState([]);

  const searchForImages = async (keyword) => {
    const images = await api.GetImagesByKeyword(keyword);

    return images;
  };

  useEffect(() => {
    const result = searchForImages(searchTerm);
    setPhotos(result);
  }, []);

  return (
    <>
      {photos.map(({ urls: { small } }, j) => (
        <img alt={j} src={small} className={classes.img} />
      ))}
    </>
  );
}

const areSearchTermsEqual = (prev, next) => {
  return prev.searchTerm === next.searchTerm;
};

const MemorizedImagePicker = React.memo(ImagePicker, areSearchTermsEqual);
export default MemorizedImagePicker;

私が苦労しているのは、searchTerm変更されていない場合、コンポーネントが結果を再度取得しないようにすることです。たとえば、コンポーネントがタブ 0 (画像のアップロード) にロードされると、タブ 1 に切り替え (画像を選択)、結果をsearchTerm取得します。searchTerm変わっていません。ご覧のとおり、使用してみReact.memoましたが、役に立ちませんでした。currentTab === 1また、ルート コンポーネントのレンダリング時に写真の取得を停止し、アクティブなタブが 1 の場合にのみ取得するようにを追加しました。