useEffect — Marka Qaybtu Shaqeyso

Mararka qaarkood qaybta React waxay u baahan tahay inay sameyso wax ka baxsan soo-bandhiga UI:

• Codsi xog ka keenaya API
• Dejinta timer ama interval
• Xiriirka events-ka adiga oo aan React isticmaalin
• Beddel cinwaanka bogga

Dhammaan waxan waxaa loo yaqaanaa side effects — waxayna marayaan useEffect.

Sida Ugu Fudud

import { useState, useEffect } from 'react';

function Cinwaan({ qoraal }) {
  useEffect(() => {
    document.title = qoraal;
  });

  return <h1>{qoraal}</h1>;
}

Tani waxay socoysaa kasta oo qaybtu dib u sawiranto — badanaa waa in ka badan. Taasi waxay na geysaa xulashada ugu muhiimsan: array-ka ku-xidhnaanshaha (dependency array).

Dependency Array — Xukumista Marka la Orod

useEffect(() => {
  // Koodkan
}, [/* halkan ku dhig ku-xidhnaanshaha */]);

function Magac({ userId }) {
  const [magac, setMagac] = useState('');

  useEffect(() => {
    // Hal mar ayuu ordo marka userId beddesho
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(xog => setMagac(xog.magac));
  }, [userId]); // ← userId waa ku-xidhnaanshaha

  return <p>Ku soo dhowow, {magac}!</p>;
}

Tusaale Dhamaystiran: Codsi API

import { useState, useEffect } from 'react';

function DhibaatoGudaha() {
  const [xog, setXog]       = useState(null);
  const [loading, setLoading] = useState(true);
  const [khalad, setKhalad]   = useState(null);

  useEffect(() => {
    let cancelled = false; // ka hortag xog-gelinta marka component-ku tago

    async function keenXog() {
      try {
        const jawaab = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        if (!jawaab.ok) throw new Error('Codsigu fashilmay');
        const natiijo = await jawaab.json();
        if (!cancelled) {
          setXog(natiijo);
          setLoading(false);
        }
      } catch (err) {
        if (!cancelled) {
          setKhalad(err.message);
          setLoading(false);
        }
      }
    }

    keenXog();

    // Cleanup — orod marka component-ku baxo
    return () => { cancelled = true; };
  }, []); // ← hal mar oo keliya

  if (loading) return <p>Waxaa la soo rarayo…</p>;
  if (khalad)  return <p style={{ color: 'red' }}>Khalad: {khalad}</p>;

  return (
    <article>
      <h2>{xog.title}</h2>
      <p>{xog.body}</p>
    </article>
  );
}

Maxaa muhiimka ah ee cancelled? Haddii isticmaaluhu u wareego ka hor inta jawaabtu iman, cancelled = true ayaa uga hortageysaa in khalad xog-gelis ah dhaco.

Nadiifinta (Cleanup)

Waxyaabaha qaar waxay u baahan yihiin in la nadiifiyo — sida subscriptions ama timers:

function Saacad() {
  const [wakhtiga, setWakhtiga] = useState(new Date());

  useEffect(() => {
    // Bilaaw timer
    const id = setInterval(() => {
      setWakhtiga(new Date());
    }, 1000);

    // Nadiifi marka component-ku baxo
    return () => clearInterval(id);
  }, []); // hal mar oo keliya

  return <p>{wakhtiga.toLocaleTimeString('so-SO')}</p>;
}

Hadaan la nadiifin, timerku wuxuu socon doonaa xitaa marka qaybtu ka baaxday shaashada — taasi waxay keentaa xog-gelinta khaldan iyo memory leaks.

Xeerka Fudud

1. Mar walba ku dar ku-xidhnaanshahaga ee aad isticmaasho gudaha useEffect
2. Soo celi cleanup function haddii aad bilaabayso wax joogsanaya
3. Isticmaal async/await si fiican — ma awoodo inaad useEffect callback-ka naftii async ka dhigto
4. [] madhan = “samee marka aad bilaabanayso, ka dibna waa ku dhamaaneyso”

Xiga: Hooks Dheeraad ah

React waxay leedahay hooks badan oo kale: useRef, useContext, useReducer, useMemo, useCallback. Laakiin useState iyo useEffect waa kuwa aad ugu badan isticmaali doontaa — bilowga sidaa ku socod.