მოყევით მაგალითები, რა შეიძლება გაკეთდეს useEffect ჰუკით, სერვერზე მოთხოვნების გამართვის გარდა.

გვერდის სათაურის მდგომარეობის მართვა (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-ზე.

მესამე მხარის ბიბლიოთეკების ან კომპონენტების ინიციალიზაცია.

დროის გამართვა და გაწმენდა (setTimeout, setInterval):

useEffect(() => {
  const timerId = setInterval(() => {
    console.log('დროის გამართვა მუშაობს');
  }, 1000);

  return () => {
    clearInterval(timerId); // ინტერვალის გაწმენდა მონტაჟის დროს.
  };
}, []);

ცვლილებების მონიტორინგი props ან მდგომარეობაში და რეაგირება ამ ცვლილებებზე:

useEffect(() => {
  // მოქმედებების განხორციელება ცვლილებების პასუხად
}, [props, state]);

კომპონენტის მონტაჟის დროს ელემენტზე ფოკუსის დაყენება:

useEffect(() => {
  inputRef.current.focus(); // ითვლება, რომ არსებობს ref inputRef
}, []);