React-та useEffect-тегінің тәуелділіктері

Енді түсті батырманы басу арқылы өзгертейік. Түс үшін color стейтін құрайық, оған бастапқы мән бере отырып:

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

useEffect-тегі жол мәнін біздің стейтімізбен ауыстырайық және оны тәуелділіктер тізіміне шаршы жақшаға қосуды ұмытпайық. Енді эффект әр жолы 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');
}