Ինչու է React-ում նշվում կախվածությունների զանգվածը։

Ավելի կախվածության զանգվածը (dependency array) React-ի hook-երում (օրինակ, useEffect, useMemo, useCallback) ցույց է տալիս, թե որ արժեքներից է կախված էֆեկտի կամ մեմոիզացված ֆունկցիայի կատարմանը:

Նրա օգտագործումը թույլ է տալիս՝

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]);

Կախվածության զանգվածի ճիշտ նշումը կարևոր է hook-երի ճիշտ աշխատանքի և React հավելվածների արտադրողականության համար։