Reactте көзкаранды массивин эмне үчүн көрсөтүшөт?

Reactтин хуктарда (мисалы, useEffect, useMemo, useCallback) көз каранды массив (dependency array) эффекттин же мемоизацияланган функциянын аткарылышына кайсы маанилердин көз каранды экенин көрсөтөт.

Анын колдонулушу төмөнкүлөргө мүмкүндүк берет:

1. Өндүрүштүүлүктү оптималдаштыруу: React эффектти кайра иштетет же маанини кайра эсептейт, эгер массивдеги маанилердин кайсы бирөөсү акыркы рендерден бери өзгөрсө гана. Бул керексиз эсептөөлөрдү жана жаңыртууларды алдын алат.
2. Чексиз циклдерден качуу: Эффекттин көз каранды массиви жок же туура эмес көрсөтүлгөн болсо, ал ар бир рендерде ишке ашып, абалдын жаңыртылышына алып келет, ал кайра рендерди жаратат, чексиз цикл түзөт. Көз каранды массивин көрсөтүү эффектти чын эле керек болгон учурда гана иштетүүгө кепилдик берет.
3. Эффекттин жашоо циклин контролдоо:
   • Бос массив [] эффект биринчи рендерден кийин бир гана жолу иштейт (мындай componentDidMount сыяктуу). Ал кийинки рендерлерде кайра иштебейт, эгер компоненттин абалы же пропс өзгөрсө да.
   • Көз каранды массиви жок же undefined болсо, эффект ар бир рендерде ишке ашат.

useEffect менен мисал:

// Эффект биринчи рендерден кийин бир гана жолу иштейт
useEffect(() => {
  console.log('Компонент монтаждалды');
}, []);

// Эффект биринчи рендер жана `count` мааниси өзгөргөндө иштейт
useEffect(() => {
  console.log('Count мааниси өзгөрдү:', count);
}, [count]);

// Эффект ар бир рендерде иштейт
useEffect(() => {
  console.log('Рендер болду');
});

useMemo менен мисал:

// `expensiveResult` мааниси `a` же `b` өзгөргөндө гана кайра эсептелет
const expensiveResult = useMemo(() => {
  console.log('Кайра эсептөө...');
  return a * b;
}, [a, b]);

useCallback менен мисал:

// `handleClick` функциясы жаңы түзүлөт, эгер `id` өзгөрсө гана
const handleClick = useCallback(() => {
  console.log('Элементке басылды with id:', id);
}, [id]);

Көз каранды массивин туура көрсөтүү хуктардын туура иштеши жана React колдонмолорунун өндүрүмдүүлүгү үчүн өтө маанилүү.