Кэширование запросов в React

Frontender Libs - обзор библиотек JS / CSS

Кэширование запросов в React

React.cache() — функция в React 19, предназначенная для кэширования результатов запросов к серверу. Это позволяет уменьшить количество дублирующихся запросов.

Пример:

import React, { useState, useEffect } from 'react';
import ReactCache from 'react-cache';

const User = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      const response = await fetch('/api/user');
      const userData = await response.json();
      setUser(userData);
    };

    const cachedFetchUser = ReactCache.cache(fetchUser, 60 * 1000); // Кэшировать на 1 минуту
    cachedFetchUser();
  }, []);

  if (!user) {
    return <div>Загрузка пользователя...</div>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
};

👉 @sWebDev

🔥10❤1

www.tgoop.com/sWebDev/2874

2.01K viewsMay 12, 2024 at 22:00

tgoop.com/sWebDev/2874

Create: 2024-05-12
Last Update: 2025-07-25 15:27:51

import React, { useState, useEffect } from 'react';
import ReactCache from 'react-cache';

const User = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      const response = await fetch('/api/user');
      const userData = await response.json();
      setUser(userData);
    };

    const cachedFetchUser = ReactCache.cache(fetchUser, 60 * 1000); // Кэшировать на 1 минуту
    cachedFetchUser();
  }, []);

  if (!user) {
    return <div>Загрузка пользователя...</div>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
};

👉 @sWebDev

BY Frontender Libs - обзор библиотек JS / CSS

Share with your friend now:
tgoop.com/sWebDev/2874

Telegram News

Кэширование запросов в React