Chapter 9React Tutorial~1 min read

useEffect Hook

useEffect — Side Effects Handle करणे

useEffect म्हणजे React render झाल्यानंतर code run करायचा hook. External systems (API, timers, event listeners) शी sync करायला वापरतात. हे "side effects" आहेत — pure rendering च्या बाहेरचे काम.

Marathi Analogy

useEffect म्हणजे गाडी चालू केल्यावर होणाऱ्या गोष्टी! गाडी चालू = component render. चालू केल्यावर — AC सुरू करणे, radio लावणे — हे side effects. गाडी बंद केल्यावर — AC बंद = cleanup.

useEffect — basic usage

jsx

import { useState, useEffect } from 'react';

function TitleUpdater() {
  const [count, setCount] = useState(0);

  // Component render झाल्यानंतर run होतो
  useEffect(() => {
    document.title = `Count: ${count}`;
    // count बदलेल तेव्हा title update होईल
  }, [count]);  // Dependency array — count बदलला तरच run

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

Dependency Array

[] vs [dep] vs no array

jsx

// [] — फक्त एकदा, mount वर
useEffect(() => {
  console.log("Component mounted!");
  // API call, initial setup
}, []);

// [count] — count बदलेल तेव्हाच
useEffect(() => {
  console.log("Count changed:", count);
}, [count]);

// No array — प्रत्येक render नंतर (rarely needed)
useEffect(() => {
  console.log("Every render");
});

Cleanup Function

useEffect cleanup — memory leaks avoid

jsx

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);

    // Cleanup — component unmount झाल्यावर interval बंद करा
    return () => {
      clearInterval(interval);  // Memory leak avoid!
      console.log("Timer cleanup झाला");
    };
  }, []);  // फक्त एकदा set करायचा

  return <p>Timer: {seconds}s</p>;
}

API Data Fetch करणे

useEffect + fetch API

jsx

import { useState, useEffect } from 'react';

function UsersList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchUsers() {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      setUsers(data);
      setLoading(false);
    }

    fetchUsers();
  }, []);  // फक्त एकदा fetch करायचे

  if (loading) return <p>Loading... ⏳</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

✅ Key Points — लक्षात ठेवा

▸useEffect(fn, deps) — render नंतर fn run होतो
▸[] — फक्त mount वर (once)
▸[dep] — dep बदलेल तेव्हाच
▸return () => {} — cleanup function
▸Timers, listeners, subscriptions — cleanup mandatory!

0/12 chapters पूर्ण

मागे — Previous

Lists & Keys

पुढे — Next

useRef Hook