🔄 React Component Lifecycle

1. Mounting: Jab component DOM mein add hota hai (birth)
2. Updating: Jab component re-render hota hai due to state/props changes (growth)
3. Unmounting: Jab component DOM se remove hota hai (death)

Hinglish: Component ki life teen stages mein hoti hai - paida hona (mounting), bada hona (updating), aur marna (unmounting).

• Cancel subscriptions
• Clear timers (setTimeout, setInterval)
• Remove event listeners
• Abort API requests
• Prevent memory leaks

Hinglish: Cleanup function ka kaam hai safai karna - timers band karna, subscriptions cancel karna, taaki memory leak na ho. Ye component unmount hone se pehle ya next effect run hone se pehle chalta hai.

useEffect(() => {
  const timer = setInterval(() => console.log('tick'), 1000);
  
  return () => clearInterval(timer); // Cleanup!
}, []);
                        

• Fiber enables asynchronous rendering - React can pause, abort, or restart rendering
• These methods can be called multiple times before a single render completes
• Side effects in these methods (API calls, subscriptions) can execute multiple times, causing bugs
• They're not "pure" - they can have side effects that don't work well with interruption

Hinglish: React 16 mein Fiber architecture aaya jo rendering ko chhote pieces mein tod sakta hai. Purane "Will" methods beech mein multiple times call ho sakte the, jisse side effects duplicate ho jate the. Isliye inhe UNSAFE mark kar diya aur naye safe alternatives diye gaye.

Hinglish: Bina dependency array ke effect har render pe chalta hai (bahut dangerous!). Empty array [] ke saath sirf pehli baar mount pe chalta hai. Hamesha dependency array use karo!

1. Always use dependency array - bina array ke har render pe chalega
2. Add conditions - state update se pehle condition check karo
3. Use primitive values in dependencies - objects/arrays har render pe naye bante hain
4. Use useCallback/useMemo - functions aur objects ko memoize karo
5. Don't update dependency inside effect - jo dependency hai use effect ke andar update mat karo (bina condition ke)

// ❌ Infinite loop
useEffect(() => {
  setCount(count + 1);
}, [count]);

// ✅ Fixed with condition
useEffect(() => {
  if (count < 10) {
    setCount(count + 1);
  }
}, [count]);

// ✅ Better: use functional update
useEffect(() => {
  setCount(prev => prev < 10 ? prev + 1 : prev);
}, []); // No dependency on count!
                        

• Read DOM measurements (scrollHeight, offsetWidth, getBoundingClientRect)
• Prevent visual flicker by updating DOM before paint
• Synchronously re-render based on DOM measurements

Real-world example: Tooltip positioning

function Tooltip({ targetRef, children }) {
  const [position, setPosition] = useState({ top: 0, left: 0 });
  const tooltipRef = useRef();

  useLayoutEffect(() => {
    // Measure target element
    const targetRect = targetRef.current.getBoundingClientRect();
    const tooltipRect = tooltipRef.current.getBoundingClientRect();
    
    // Calculate position to avoid overflow
    const top = targetRect.bottom + 10;
    const left = targetRect.left - (tooltipRect.width / 2);
    
    setPosition({ top, left });
  }, [targetRef]);

  return (
    <div ref={tooltipRef} style={{ position: 'absolute', ...position }}>
      {children}
    </div>
  );
}
// useLayoutEffect ensures tooltip appears at correct position
// immediately, without flickering at wrong position first
                        

Hinglish: useLayoutEffect tab use karo jab DOM ko measure karna ho aur uske basis pe turant update karna ho, taaki user ko flicker na dikhe. Tooltip, dropdown positioning, scroll animations - yahan use hota hai.

• User quickly changes input (e.g., search query)
• Multiple API requests fire in sequence
• Responses arrive in different order than requests
• Older response arrives last and overwrites newer data

Solution: Use cleanup function with cancellation flag

function SearchResults({ query }) {
  const [results, setResults] = useState([]);

  useEffect(() => {
    let cancelled = false; // Cancellation flag

    async function fetchResults() {
      const response = await fetch(`/api/search?q=${query}`);
      const data = await response.json();
      
      // Only update if this effect hasn't been cleaned up
      if (!cancelled) {
        setResults(data);
      }
    }

    fetchResults();

    // Cleanup: mark this request as cancelled
    return () => {
      cancelled = true;
    };
  }, [query]);

  return <div>{results.map(...)}</div>;
}

// Better: Use AbortController (modern approach)
useEffect(() => {
  const controller = new AbortController();

  fetch(`/api/search?q=${query}`, { signal: controller.signal })
    .then(res => res.json())
    .then(data => setResults(data))
    .catch(err => {
      if (err.name !== 'AbortError') {
        console.error(err);
      }
    });

  return () => controller.abort(); // Cancel request
}, [query]);
                        

Hinglish: Race condition ka matlab hai ki purani request ka response baad mein aa jaye aur nayi data ko overwrite kar de. Solution: cleanup function mein ek flag set karo ya AbortController use karke request cancel karo.