ЯсноПонятно24

Для минимизации запросов к серверу в компоненте BurgerIngredients, можно использовать useMemo в сочетании с useEffect для кэширования данных и обновления их только при необходимости.

Ниже приведен пример использования useMemo и useEffect в компоненте BurgerIngredients:

import { useState, useRef, useEffect, FC, useMemo } from 'react';
import { useInView } from 'react-intersection-observer';
import { useSelector } from '../../services/store';
import { TTabMode } from '@utils-types';
import { BurgerIngredientsUI } from '../ui/burger-ingredients';
import ingredientSlice from '../../services/slices/ingredientSlice';
import { Preloader } from '../ui';
import { fetchIngredients } from '../../services/slices/ingredientSlice';

export const BurgerIngredients: FC = () => {
  const ingredients = useSelector(
    ingredientSlice.selectors.getIngredientsSelector
  );
  const isLoading = useSelector(ingredientSlice.selectors.getLoadingSelector);
  const isError = useSelector(ingredientSlice.selectors.getErrorSelector);

  const filteredIngredients = useMemo(() => {
    const buns = ingredients.filter((ingredient) => ingredient.type === 'bun');
    const mains = ingredients.filter((ingredient) => ingredient.type === 'main');
    const sauces = ingredients.filter((ingredient) => ingredient.type === 'sauce');
    return { buns, mains, sauces };
  }, [ingredients]);

  const [currentTab, setCurrentTab] = useState<TTabMode>('bun');
  const titleBunRef = useRef<HTMLHeadingElement>(null);
  const titleMainRef = useRef<HTMLHeadingElement>(null);
  const titleSaucesRef = useRef<HTMLHeadingElement>(null);

  const [bunsRef, inViewBuns] = useInView({
    threshold: 0
  });

  const [mainsRef, inViewFilling] = useInView({
    threshold: 0
  });

  const [saucesRef, inViewSauces] = useInView({
    threshold: 0
  });

  useEffect(() => {
    if (inViewBuns) {
      setCurrentTab('bun');
    } else if (inViewSauces) {
      setCurrentTab('sauce');
    } else if (inViewFilling) {
      setCurrentTab('main');
    }
  }, [inViewBuns, inViewFilling, inViewSauces]);

  const onTabClick = (tab: string) => {
    setCurrentTab(tab as TTabMode);
    if (tab === 'bun')
      titleBunRef.current?.scrollIntoView({ behavior: 'smooth' });
    if (tab === 'main')
      titleMainRef.current?.scrollIntoView({ behavior: 'smooth' });
    if (tab === 'sauce')
      titleSaucesRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  if (isLoading) {
    return <Preloader />;
  }

  if (isError) {
    return <div>Произошла ошибка при получении данных с сервера</div>;
  }

  return (
    <BurgerIngredientsUI
      currentTab={currentTab}
      buns={filteredIngredients.buns}
      mains={filteredIngredients.mains}
      sauces={filteredIngredients.sauces}
      titleBunRef={titleBunRef}
      titleMainRef={titleMainRef}
      titleSaucesRef={titleSaucesRef}
      bunsRef={bunsRef}
      mainsRef={mainsRef}
      saucesRef={saucesRef}
      onTabClick={onTabClick}
    />
  );
};

В этом примере использован useMemo для кэширования отфильтрованных ингредиентов и их обновления только при изменении исходных данных. Таким образом, запросы к серверу будут минимизированы, и компонент будет работать более эффективно.