Как контролировать компонент при кешировании?

Как контролировать компонент при кешировании

Кеширование компонентов — это оптимизация производительности, при которой React сохраняет состояние и структуру компонента в памяти. Однако это может привести к проблемам, если компонент не обновляется должным образом при изменении данных.

Проблема кеширования

Типичная проблема:

• Компонент отображается с кешированными данными
• Новые данные приходят, но компонент не обновляется
• Пользователь видит устаревшую информацию

Способ 1: Использование key для принудительного перерендера

Самый эффективный способ — изменить key компонента:

function App({ userId }) {
  return (
    <UserProfile key={userId} userId={userId} />
  );
}

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);
  
  return <div>{user?.name}</div>;
}

Когда userId изменяется:

1. React видит, что key изменился
2. Старый компонент полностью удаляется
3. Новый компонент создаётся с чистым состоянием
4. useEffect выполняется и загружает новые данные

Способ 2: Контролирование зависимостей в useEffect

Убедись, что все необходимые зависимости указаны:

function ProductDetail({ productId }) {
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(false);
  
  useEffect(() => {
    setLoading(true);
    fetchProduct(productId)
      .then(setProduct)
      .finally(() => setLoading(false));
  }, [productId]);  // ВАЖНО: productId в зависимостях!
  
  if (loading) return <p>Загружаю...</p>;
  return <div>{product?.title}</div>;
}

Проблема: забыли зависимость

// ❌ Плохо: effect выполнится только один раз
useEffect(() => {
  fetchProduct(productId).then(setProduct);
}, []);  // productId НЕ в зависимостях!

// ✅ Хорошо: effect выполнится при изменении productId
useEffect(() => {
  fetchProduct(productId).then(setProduct);
}, [productId]);

Способ 3: Кеширование с контролем версий

Добавь версию данных в кеш:

function CachedComponent({ dataId, version }) {
  const [data, setData] = useState(null);
  const cacheRef = useRef({});
  
  useEffect(() => {
    const cacheKey = `${dataId}-v${version}`;
    
    // Проверяем, есть ли данные в кеше для этой версии
    if (cacheRef.current[cacheKey]) {
      setData(cacheRef.current[cacheKey]);
    } else {
      // Загружаем новые данные
      fetchData(dataId).then(result => {
        cacheRef.current[cacheKey] = result;
        setData(result);
      });
    }
  }, [dataId, version]);
  
  return <div>{data?.content}</div>;
}

Способ 4: Использование React Query для кеширования

React Query автоматически управляет кешем:

import { useQuery } from '@tanstack/react-query';

function UserData({ userId }) {
  const { data: user, isLoading, isFetching } = useQuery({
    queryKey: ['user', userId],  // Уникальный ключ кеша
    queryFn: () => fetchUser(userId)
  });
  
  if (isLoading) return <p>Загружаю...</p>;
  if (isFetching) return <p>Обновляю данные...</p>;
  
  return <div>{user.name}</div>;
}

React Query автоматически инвалидирует кеш при:

• Изменении queryKey
• Удалении окна браузера
• Потере соединения
• Явном вызове invalidateQueries

const queryClient = useQueryClient();

const handleDelete = async (userId) => {
  await deleteUser(userId);
  // Инвалидируем кеш
  queryClient.invalidateQueries({ queryKey: ['user', userId] });
};

Способ 5: SWR для кеширования данных

SWR (stale-while-revalidate) — интеллектуальное кеширование:

import useSWR from 'swr';

function Data({ id }) {
  const { data, isLoading, mutate } = useSWR(
    `/api/data/${id}`,
    fetch
  );
  
  const handleRefresh = () => {
    mutate();  // Перезагружает данные
  };
  
  return (
    <div>
      {isLoading ? 'Загружаю...' : data.content}
      <button onClick={handleRefresh}>Обновить</button>
    </div>
  );
}

Способ 6: Стирание кеша вручную

Очистка кеша при переходе на другую страницу:

function useDataWithCache(id) {
  const cacheRef = useRef(new Map());
  const [data, setData] = useState(null);
  
  useEffect(() => {
    // Проверяем кеш
    if (cacheRef.current.has(id)) {
      setData(cacheRef.current.get(id));
      return;
    }
    
    // Загружаем данные
    fetchData(id).then(result => {
      cacheRef.current.set(id, result);
      setData(result);
    });
  }, [id]);
  
  const clearCache = () => {
    cacheRef.current.clear();
    setData(null);
  };
  
  return { data, clearCache };
}

function App() {
  const { data, clearCache } = useDataWithCache(1);
  
  const handleNavigate = () => {
    clearCache();  // Очищаем кеш перед переходом
    navigate('/other-page');
  };
  
  return <button onClick={handleNavigate}>Перейти</button>;
}

Способ 7: Управление кешем HTTP запросов

Использование заголовков Cache-Control:

const fetchOptions = {
  headers: {
    'Cache-Control': 'no-cache',  // Не кешировать
    'Pragma': 'no-cache',
    'Expires': '0'
  }
};

function App() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch('/api/data', fetchOptions)
      .then(res => res.json())
      .then(setData);
  }, []);
  
  return <div>{JSON.stringify(data)}</div>;
}

Способ 8: Мониторинг стирания кеша

function ComponentWithCacheMonitoring({ id }) {
  const [data, setData] = useState(null);
  const cacheRef = useRef({});
  
  useEffect(() => {
    console.log('Кеш состояние:', cacheRef.current);
    
    if (cacheRef.current[id]) {
      console.log(`Используем кешированные данные для ID ${id}`);
      setData(cacheRef.current[id]);
    } else {
      console.log(`Загружаем новые данные для ID ${id}`);
      fetchData(id).then(result => {
        cacheRef.current[id] = result;
        setData(result);
      });
    }
  }, [id]);
  
  return <div>{JSON.stringify(data)}</div>;
}

Способ 9: Кеширование с истечением срока

TTL (Time To Live) для кеша:

function useCachedData(url, ttlMs = 5 * 60 * 1000) {
  const cacheRef = useRef({ data: null, timestamp: null });
  const [data, setData] = useState(null);
  
  useEffect(() => {
    const now = Date.now();
    const { data: cachedData, timestamp } = cacheRef.current;
    
    // Проверяем, не устарел ли кеш
    if (cachedData && timestamp && now - timestamp < ttlMs) {
      console.log('Используем кеш');
      setData(cachedData);
      return;
    }
    
    // Загружаем новые данные
    console.log('Кеш истёк, загружаю новые данные');
    fetch(url)
      .then(res => res.json())
      .then(result => {
        cacheRef.current = { data: result, timestamp: now };
        setData(result);
      });
  }, [url, ttlMs]);
  
  return data;
}

// Использование
const data = useCachedData('/api/data', 10000);  // 10 секунд TTL

Способ 10: Контроль кеша при переходах в Next.js

Next.js и ISR (Incremental Static Regeneration):

// pages/product/[id].js
export async function getStaticProps({ params }) {
  const product = await fetchProduct(params.id);
  
  return {
    props: { product },
    revalidate: 60  // Перегенерировать каждые 60 секунд
  };
}

export async function getStaticPaths() {
  const products = await fetchAllProducts();
  
  return {
    paths: products.map(p => ({ params: { id: p.id } })),
    fallback: 'blocking'  // Генерировать страницы на лету если нужна
  };
}

Выводы

• Используй key для принудительного перерендера компонента
• Контролируй зависимости в useEffect
• React Query и SWR обеспечивают интеллектуальное кеширование
• TTL (Time To Live) помогает устарелым данным обновляться
• Cache-Control заголовки контролируют HTTP кеширование
• Инвалидируй кеш при изменении критических данных
• Мониторь кеш состояние для отладки проблем