Տվեք օրինակներ, թե ինչ կարող եք անել useEffect hook-ով, բացի սերվերին հարցումներ ուղարկելուց։

Էջի վերնագրի վիճակի կառավարում (document.title).

Բրաուզերի իրադարձությունների գրանցում և հեռացում (օրինակ, պատուհանի չափի փոփոխություն, տարրից դուրս սեղմումներ):

useEffect(() => {
  const handleResize = () => {
    console.log('Պատուհանի չափը փոխվել է');
  };
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Զբաղվածության բաց ցանկություն: Էֆեկտը մեկ անգամ կատարվում է մոնտաժման ժամանակ և մաքրվում է մոնտաժից դուրս գալու ժամանակ:

Աշխատանք տեղական պահոցով (տվյալների ընթերցում/գրառում):

useEffect(() => {
  const savedValue = localStorage.getItem('myInputValue');
  if (savedValue) {
    setInputValue(savedValue); // Կանխատեսվում է, որ կա inputValue վիճակ և setInputValue ֆունկցիա
  }
}, []); // Վիճակի բեռնում մոնտաժման ժամանակ:

useEffect(() => {
  localStorage.setItem('myInputValue', inputValue); // Պահպանել inputValue փոփոխության ժամանակ:
}, [inputValue]); // Զբաղվածություն inputValue-ից:

Երրորդ կողմի գրադարանների կամ կոմպոնենտների սկզբնականացման գործընթաց:

useEffect(() => {
  // Կառավարում կամ initialization code
}, []);

Ժամանակաչափերի կարգավորում և մաքառում (setTimeout, setInterval):

useEffect(() => {
  const timerId = setInterval(() => {
    console.log('Ժամանակաչափ աշխատում է');
  }, 1000);

  return () => {
    clearInterval(timerId); // Intervals մաքրել մոնտաժից դուրս գալու ժամանակ:
  };
}, []);

Փոփոխությունների հետևում և արձագանքում դրանց:

useEffect(() => {
  // Կատարել գործողություններ փոփոխությունների դեպքում
}, [props, state]);

Կոմպոնենտի մոնտաժում ֆոկուսավորել տարրին:

useEffect(() => {
  inputRef.current.focus(); // Կանխատեսվում է, որ կա ref inputRef
}, []);