Reactда useEffect эффект хуки

Эффектлар билан ишлаш учун useEffect хуки қўлланилади. Унинг ишлашини кўриб чиқайлик.

Бошлаш учун хукимизни импорт қиламиз:

App.jsximport { useEffect } from 'react';

Сарлавҳани ўз ичига олган App компонентини яратамиз:

App.jsxfunction App() {
  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;

Фараз қилайлик, бизга рендерингдан сўнг қандайдир амал бажариш керак, масалан, бутун саҳифанинг фон рангини ўрнатиш. Бунда ташқи система браузернинг DOMи бўлади.

Хукимизни қўллаймиз:

App.jsxfunction App() {
  useEffect(() => {
    document.body.style.backgroundColor = 'green';
  }, []);
  
  ...
}

Иккинчи параметрда богликликлар массиви берилади. Унда компонент функциялари томонидан ишлатиладиган қийматлар киради. Биз ҳозирча уларни бўш қолдирдик. Бунда фон ранги фақат рендерингдан сўнг бир марта ўрнатилади. Иккинчи параметрни умуман олиб ташлаб бўлмайди, чунки сизнинг компонентингиз чексиз циклга тушиши мумкин.