리액트 cache

cache – React

cache는 RSC에만 사용가능하다.

cache를 사용하면 데이터 가져오기 또는 계산 결과를 캐시할 수 있다.

캐시를 통해 데이터를 다시 호출하는 것이 아닌, 캐시된 결과를 반환한다.

컴포넌트 간에 데이터 스냅샷을 공유하려면 fetch와 같은 데이터 가져오기 함수로 캐시를 호출하세요. 여러 컴포넌트가 동일한 데이터를 불러오는 경우 한 번만 요청하고 반환된 데이터는 캐시되어 컴포넌트 간에 공유됩니다. 모든 컴포넌트는 서버 렌더링 전반에 걸쳐 동일한 데이터 스냅샷을 참조합니다.

import {cache} from 'react';
import {fetchTemperature} from './api.js';

const getTemperature = cache(async (city) => {
	return await fetchTemperature(city);
});

async function AnimatedWeatherCard({city}) {
	const temperature = await getTemperature(city);
	// ...
}

async function MinimalWeatherCard({city}) {
	const temperature = await getTemperature(city);
	// ...
}

client에서는 useMemo를 통해 캐싱을 할 수 있지만 컴포넌트의 로컬로 저장되어 공유가 될 수 없다. server에서는 hook을 사용할 수 없기 때문에 컴포넌트 간에 공유할 수 있는 작업을 메모화하려면 cache를 사용해야 한다. 계산에만 사용해야 하는 useMemo와 달리 ceche는 데이터 가져오기를 메모화하는데에 권장된다.

메모화된 함수를 호출할 때 React는 입력 인수를 조회하여 결과가 이미 캐시되어 있는지 확인합니다. React는 인수의 얕은 동등성을 사용하여 캐시 히트가 있는지 여부를 결정합니다.

import {cache} from 'react';

const calculateNorm = cache((vector) => {
  // ...
});

function MapMarker(props) {
  // 🚩 Wrong: props is an object that changes every render.
  const length = calculateNorm(props);
  // ...
}

function App() {
  return (
    <>
      <MapMarker x={10} y={10} z={10} />
      <MapMarker x={10} y={10} z={10} />
    </>
  );
}

import {cache} from 'react';

const calculateNorm = cache((x, y, z) => {
  // ...
});

function MapMarker(props) {
  // ✅ Good: Pass primitives to memoized function
  const length = calculateNorm(props.x, props.y, props.z);
  // ...
}

function App() {
  return (
    <>
      <MapMarker x={10} y={10} z={10} />
      <MapMarker x={10} y={10} z={10} />
    </>
  );
}