React-та useEffect эффект хукі

Эффектермен жұмыс істеу үшін useEffect хукі қолданылады. Оның жұмысын қарастырайық.

Алдымен хукімізді импорттаймыз:

import { useEffect } from 'react';

Тақырыпты қамтитын App компонентін жасайық:

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

export default App;

Бізге рендерингтен кейін қандай да бір әрекетті орындау керек делік, мысалы, бүкіл беттің фон түсін орнату. Бұл жағдайда сыртқы жүйе браузердің DOM-ы болады.

Хукімізді қолданайық:

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

Екінші параметрде тәуелділіктер массиві беріледі. Оларға компонент функциялары қолданатын мәндер кіреді. Біз оларды бос қалдырдық. Бұл жағдайда түс тек бір рет рендерингтен кейін жасыл түске өзгереді. Екінші параметрді мүлдем алып тастауға болмайды, себебі сіздің компонентіңіз шексіз циклге түсуі мүмкін.

useEffect хукінің көмегімен бет тайтылын өзгертіңіз.