Reactда useEffectдаги богликликлар

Энди тугмани босганда рангни ўзгартирамиз. Ранг учун color стейтини яратиб, унга бошлангич қийматни берамиз:

App.jsxconst [color, setColor] = useState('green');

useEffect ичидаги сатр қийматини бизнинг стейт билан алмаштирамиз ва ун kvadrat қавс ичидаги богликликлар руйхатига уни қўшиб қўйишни унутмаймиз. Энди эффект color стейти ўзгарганида хар доим бажарилади:

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

Энди компонентимизга рангни ўзгартириш учун тугма қўшамиз:

App.jsxreturn (
  <div>
    <h1>React App</h1>
    <button onClick={changeColor}>change</button>
  </div>
);

Бизга рангни оранж рангга ўзгартирадиган клик ишловчиси функциясини ҳам қўшимиз керак:

App.jsxfunction changeColor() {
  setColor('orange');
}