Кодты қарап шығу: алдыңда өндірістен алынған кодтың бөлігі тұр. Мәселелерді тауып, жақсартуларды ұсыныңыз. Егер проптар арқылы функциялар мен объектілер берілсе, React.memo мемоизацияны дұрыс орындай ма?

React.memo компонентті мемоизациялайды, егер пропстар алдыңғы рендермен салыстырғанда өзгермеген болса, қайта рендерлеуді болдырмайды. Алайда, егер пропстарда функциялар немесе объектілер берілсе, мемоизация дұрыс жұмыс істемеуі мүмкін, себебі әр рендер кезінде функциялар мен объектілердің жаңа сілтемелері құрылады, және React.memo-ның shallow салыстыруы өзгерістерді анықтайды.

Осы мәселені жақсарту үшін:

• useCallback қолдану арқылы функцияларды мемоизациялау, сілтемелердің қажетсіз өзгеруін болдырмау.
• useMemo қолдану арқылы проптарға берілетін объектілер немесе массивтерді мемоизациялау.

Мысал:

const Parent = () => {
  const [count, setCount] = React.useState(0);

  // Функция мемоизацияланады, рендер кезінде сілтеме өзгермейді
  const handleClick = React.useCallback(() => {
    console.log('Нұқу');
  }, []);

  // Объект мемоизацияланады
  const options = React.useMemo(() => ({ enabled: true }), []);

  return <Child onClick={handleClick} options={options} />;
};

const Child = React.memo(({ onClick, options }) => {
  console.log('Баланың рендері');
  return <button onClick={onClick}>Мені басыңыз</button>;
});

useCallback және useMemo қолданбаса, Child әр рендерде қайта рендерленеді, тіпті пропстар логикалық түрде өзгермеген болса да.