useEffect부터 useMemo를 활용해볼까요?

리액트에서 사용useEffect의 변수 의존이 아니라 사용useMemo이 더 간결하지 않나요?이 가설은이로 인해 생기는 차이와 나쁜 점은 반드시 가르쳐 주십시오.
프로그램을 만들 때 변수에 의존하는 다른 변수가 나타날 수 있습니다.
예를 들어, 데이터베이스에는 다음과 같은 객체가 있습니다.

const colorDataBase = [
  {
    id: "0",
    name: "default",
    color: "#fff"
  },
  {
    id: "1",
    name: "red",
    color: "#f00"
  },
  {
    id: "2",
    name: "blue",
    color: "#00f"
  },
  {
    id: "3",
    name: "yellow",
    color: "#ff0"
  }
];

그 중에서 색을 선택할 때 프론트에서 유지된 색 데이터를 고쳐야 한다.(뜻을 모르면 아래 코드를 보면 알 수 있다)
이번에는 데이터베이스에서 Fetch 처리를 하는 것이 아니라 상기 자바스크립트의 대상을 일반적으로 조작합니다.
그때useEffect의 실시는 대략 이런 느낌이었다.

export default function App() {
  /* 選択状態のIDを保持するState */
  const [selectedId, setSelectedId] = useState("0");
  /* 選択状態の色に関するデータを保持するState */
  const [currentData, setCurrentData] = useState({
    id: "0",
    name: "default",
    code: "#fff"
  });

  /* 選択状態が変化する度に実行する処理 */
  useEffect(() => {
    const data = colorDataBase.find((item) => item.id === selectedId);
    setCurrentData(data);
  }, [selectedId]);

  return (
    <div>
      <select
        value={selectedId}
        onChange={(e) => setSelectedId(e.target.value)}
      >
        <option value="1">red</option>
        <option value="2">blue</option>
        <option value="3">yellow</option>
      </select>
      <div># current data by useEffect & useState</div>
      <pre>{JSON.stringify(currentData, null, 2)}</pre>
    </div>
  );
}

이것도 괜찮지만 특별히 선택된 상태의 색상과 관련된 데이터를 저장하는 State에 사용할 필요는 없겠죠?나는useMemo로 썼다고 생각한다.

export default function App() {
  const [selectedId, setSelectedId] = useState("0");

  /* selectIdに依存するcurrentDataという変数を作成 */
  const currentData = useMemo(() => {
    const data = colorDataBase.find((item) => item.id === selectedId);
    return data;
  }, [selectedId]);

  return (
    <div>
      <select
        value={selectedId}
        onChange={(e) => setSelectedId(e.target.value)}
      >
        <option value="1">red</option>
        <option value="2">blue</option>
        <option value="3">yellow</option>
      </select>
      <div># current data by useMemo only</div>
      <pre>{JSON.stringify(currentData, null, 2)}</pre>
    </div>
  );
}

나는 이것이 더 간결하고 알기 쉽다고 생각한다.
실제로 돌려본 건 이쪽이에요.
렌더링을 살짝 검증했는데 성능에 변화가 없는 것 같은데?생각 중이야.
추기
useMemo는 비동기 처리를 쓸 수 없기 때문에 데이터베이스를 가정하면useEffect만 사용할 수 있습니다.