React Hooks Complete Guide — useState, useEffect, useRef & More

const [count, setCount] = useState(0);
const [user, setUser]   = useState({ name: "", email: "" });

// Always create new objects — never mutate directly
setUser(prev => ({ ...prev, name: "Ali" }));

// Runs once on mount
useEffect(() => {
  document.title = "My App";
}, []);

// Runs when 'id' changes
useEffect(() => {
  fetchUser(id);
}, [id]);

// Cleanup on unmount
useEffect(() => {
  const timer = setInterval(tick, 1000);
  return () => clearInterval(timer); // cleanup
}, []);

const inputRef = useRef(null);

// Auto-focus on mount
useEffect(() => { inputRef.current?.focus(); }, []);

// Store interval ID without causing re-render
const timerRef = useRef(null);
timerRef.current = setInterval(tick, 1000);

const ThemeContext = createContext("light");

// Provider
<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

// Consumer
const theme = useContext(ThemeContext);

function useFetch(url) {
  const [data, setData]       = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError]     = useState(null);

  useEffect(() => {
    fetch(url)
      .then(r => r.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
}

// Usage
const { data, loading } = useFetch("/api/courses");