React useState and useEffect Hooks Explained — With Real-World Patterns

import { useState } from 'react';

// A real-world example: a password strength indicator
function PasswordStrengthChecker() {
  // useState returns [currentValue, setterFunction]
  // React stores 'password' outside this function so it survives re-renders
  const [password, setPassword] = useState('');

  // Derived state — calculated fresh each render from 'password'
  // No need for a separate useState here; it's not independently settable
  const strength = calculateStrength(password);

  function handleChange(event) {
    // We pass the new value to the setter — React schedules a re-render
    // After re-render, 'password' will equal event.target.value
    setPassword(event.target.value);
  }

  return (
    <div>
      <input
        type="password"
        value={password}          // Controlled input — React owns this value
        onChange={handleChange}
        placeholder="Enter password"
      />
      <p>Strength: <strong>{strength.label}</strong></p>
      <div
        style={{
          width: `${strength.score * 25}%`, // Score 0-4, converts to 0-100%
          height: '8px',
          backgroundColor: strength.color,
          transition: 'width 0.3s ease'
        }}
      />
    </div>
  );
}

function calculateStrength(password) {
  let score = 0;
  if (password.length >= 8)          score++; // Minimum length
  if (/[A-Z]/.test(password))        score++; // Has uppercase
  if (/[0-9]/.test(password))        score++; // Has number
  if (/[^A-Za-z0-9]/.test(password)) score++; // Has special char

  const levels = [
    { label: 'Too short',  color: '#e74c3c' },
    { label: 'Weak',       color: '#e67e22' },
    { label: 'Fair',       color: '#f1c40f' },
    { label: 'Good',       color: '#2ecc71' },
    { label: 'Strong',     color: '#27ae60' },
  ];

  return { score, ...levels[score] };
}

export default PasswordStrengthChecker;

import { useState, useEffect } from 'react';

// Real-world pattern: fetch data when a prop changes, cancel stale requests
function GitHubUserProfile({ username }) {
  const [profile, setProfile]   = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError]       = useState(null);

  useEffect(() => {
    // AbortController lets us cancel the fetch if 'username' changes
    // before the previous request finishes — this prevents a race condition
    const controller = new AbortController();

    async function fetchProfile() {
      setIsLoading(true);
      setError(null);

      try {
        const response = await fetch(
          `https://api.github.com/users/${username}`,
          { signal: controller.signal } // Attach the abort signal to this fetch
        );

        if (!response.ok) {
          throw new Error(`GitHub API error: ${response.status}`);
        }

        const data = await response.json();
        setProfile(data);   // Update state — triggers a re-render with new data
      } catch (err) {
        // AbortError is expected when we cancel — don't treat it as a real error
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setIsLoading(false);
      }
    }

    fetchProfile();

    // Cleanup function: runs before the next effect OR when component unmounts
    // This cancels the in-flight fetch if 'username' changes rapidly
    return () => {
      controller.abort();
    };

  }, [username]); // Dependency array: re-run this effect whenever 'username' changes

  if (isLoading) return <p>Loading {username}'s profile...</p>;
  if (error)     return <p>Error: {error}</p>;
  if (!profile)  return null;

  return (
    <div>
      <img src={profile.avatar_url} alt={`${profile.login}'s avatar`} width={80} />
      <h2>{profile.name ?? profile.login}</h2>
      <p>Public repos: {profile.public_repos}</p>
      <p>Followers: {profile.followers}</p>
    </div>
  );
}

export default GitHubUserProfile;

import { useState, useEffect } from 'react';

const OMDB_API_KEY = 'your_api_key_here'; // Get a free key at omdbapi.com
const DEBOUNCE_DELAY_MS = 400; // Wait 400ms after user stops typing

function DebouncedMovieSearch() {
  // 1. Raw input — updates on every keystroke for immediate UI feedback
  const [inputValue, setInputValue] = useState('');

  // 2. Debounced value — only updates after user pauses typing
  //    This is what we actually use to trigger the API call
  const [searchTerm, setSearchTerm] = useState('');

  // 3. Results from the API
  const [movies, setMovies] = useState([]);
  const [isSearching, setIsSearching] = useState(false);

  // EFFECT 1: Debounce — delay updating searchTerm until typing pauses
  useEffect(() => {
    // Set a timer to update searchTerm 400ms from now
    const debounceTimer = setTimeout(() => {
      setSearchTerm(inputValue.trim());
    }, DEBOUNCE_DELAY_MS);

    // Cleanup: if inputValue changes again before 400ms is up,
    // cancel the previous timer and start a fresh one
    // This is the core of debouncing
    return () => clearTimeout(debounceTimer);

  }, [inputValue]); // Re-run whenever the raw input changes

  // EFFECT 2: Fetch — fires only when searchTerm actually settles
  useEffect(() => {
    // Don't search for empty strings
    if (!searchTerm) {
      setMovies([]);
      return;
    }

    const controller = new AbortController();

    async function searchMovies() {
      setIsSearching(true);
      try {
        const url = `https://www.omdbapi.com/?s=${encodeURIComponent(searchTerm)}&apikey=${OMDB_API_KEY}`;
        const response = await fetch(url, { signal: controller.signal });
        const data = await response.json();

        // OMDB returns { Search: [...] } on success, { Error: '...' } on failure
        setMovies(data.Search ?? []);
      } catch (err) {
        if (err.name !== 'AbortError') console.error('Search failed:', err);
      } finally {
        setIsSearching(false);
      }
    }

    searchMovies();
    return () => controller.abort(); // Cancel if searchTerm changes mid-flight

  }, [searchTerm]); // Only re-run when the debounced term changes — NOT on every keystroke

  return (
    <div style={{ fontFamily: 'sans-serif', maxWidth: '480px', margin: '0 auto' }}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Search for a movie..."
        style={{ width: '100%', padding: '10px', fontSize: '16px' }}
      />

      {isSearching && <p>Searching...</p>}

      <ul style={{ listStyle: 'none', padding: 0 }}>
        {movies.map((movie) => (
          <li key={movie.imdbID} style={{ padding: '8px 0', borderBottom: '1px solid #eee' }}>
            <strong>{movie.Title}</strong> ({movie.Year})
          </li>
        ))}
      </ul>

      {!isSearching && searchTerm && movies.length === 0 && (
        <p>No results found for "{searchTerm}"</p>
      )}
    </div>
  );
}

export default DebouncedMovieSearch;