Ի՞նչ hooks-ներով եք աշխատել ֆունկցիոնալ կոմպոնենտներում: Ո՞րն է ամենանորինը:

React-ի ֆունկցիոնալ կոմպոնենտներում հաճախ օգտագործվում են հետևյալ hook-երը՝

• useState — վիճակի կառավարում։
• useEffect — կողմնակի ազդեցությունների համար (հարցումներ, բաժանորդագրություններ):
• useContext — կոնտեքստին հասնելու համար:
• useRef — փոփոխական արժեքներ պահելու և DOM-ին հասնելու համար:
• useMemo և useCallback — կատարողականության օպտիմալացման համար:

Ամենանվերակ hook-երից, որոնցով աշխատել եմ, կարող է լինել useImperativeHandle. Այն թույլ է տալիս կարգավորել այն օրինակը, որը հասանելի կլինի ծնող կոմպոնենտին ref-ի միջոցով։ Սա օգտակար է, երբ անհրաժեշտ է վերահսկել, թե որ մեթոդներն ու հատկությունները հասանելի են արտաքինից, հատկապես DOM տարրերի կամ երրորդ կողմի գրադարանների վրա աշխատելիս:

Օրինակ useImperativeHandle-ի օգտագործման:

import React, { useImperativeHandle, forwardRef, useRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} {...props} />;
});

// Ծնող կոմպոնենտը կարող է կանչել focus մեթոդը:
// const ref = React.createRef();
// <FancyInput ref={ref} />
// ref.current.focus();