React-də asılılıqlar massivinin göstərilməsi nə üçün edilir?

React hook'larında (məsələn, useEffect, useMemo, useCallback) asılılıq array-si (dependency array) effektin və ya yadda saxlanmış funksiyanın hansı dəyərlərə bağlı olduğunu göstərir.

Onun istifadəsi aşağıdakı imkanları verir:

1. Performansı optimallaşdırmaq: React effektin yenidən işlənməsini və ya dəyərin yenidən hesablanmasını yalnız o zaman edir ki, array-dəki hər hansı bir dəyər sonuncu renderdən bəri dəyişibsə. Bu, lazımsız hesablamaları və yeniləmələri qarşısını alır.
2. Məntiqi sonsuz dövrlərdən qaçmaq: Asılılıq array-si olmadan və ya düzgün göstərilməyibsə, effekt hər renderdə işləyə bilər, bu da vəziyyətin yenilənməsinə və yenidən renderə səbəb olur, nəticədə sonsuz dövr yaranır. Asılılıqları düzgün göstərmək effektin yalnız lazım olan zaman işləməsini təmin edir.
3. Effektin həyat dövrünü idarə etmək:
   • Boş array [] yalnız ilk renderdən sonra bir dəfə işləyəcək (məsələn, componentDidMount kimi). Bu, növbəti renderlərdə yenidən işləməyəcək, hətta komponentin vəziyyəti və ya props dəyişsə belə.
   • Asılılıq array-i olmaması və ya undefined göstərilməsi, effektin hər renderdə işləyəcəyini göstərir.

useEffect nümunəsi:

// Effekt yalnız ilk renderdən sonra bir dəfə işləyəcək
useEffect(() => {
  console.log('Komponent yığışdırıldı');
}, []);

// Effekt ilk renderdə və `count` dəyişəndə işləyəcək
useEffect(() => {
  console.log('Count dəyəri dəyişdi:', count);
}, [count]);

// Effekt hər renderdə işləyəcək
useEffect(() => {
  console.log('Render edildi');
});

useMemo nümunəsi:

// `a` və `b` dəyişəndə, `expensiveResult` yenidən hesablanacaq
const expensiveResult = useMemo(() => {
  console.log('Yenidən hesablanır...');
  return a * b;
}, [a, b]);

useCallback nümunəsi:

// `id` dəyişməzsə, `handleClick` yenidən yaradılmayacaq
const handleClick = useCallback(() => {
  console.log('Elementə klik edildi, id:', id);
}, [id]);

Düzgün asılılıq array-inin göstərilməsi hook-ların düzgün işləməsini və React tətbiqlərinin performansını təmin edir.