Lab Projects
PythonReact/Next.jsBlogAbout

📱 Verification Code Countdown Example

Implement SMS verification code countdown using useEffect + timer, demonstrating the importance of cleanup functions

🎯 Interactive Demo
💻 Core Implementation
// ✅ Use constant: Ensure countdown starts from 60 seconds
const COUNTDOWN_DURATION = 60; // seconds

const [countdown, setCountdown] = useState(0);

// ✅ Core countdown logic
useEffect(() => {
  if (countdown > 0) {
    const timer = setTimeout(() => {
      setCountdown(countdown - 1);
    }, 1000);

    // 🧹 Cleanup function: Prevent memory leaks
    return () => clearTimeout(timer);
  }
}, [countdown]);

// Send verification code
const handleSendCode = async () => {
  await api.post('/send-sms', { phone });

  // ✅ Use constant instead of hardcoding
  setCountdown(COUNTDOWN_DURATION);
};

// Button text
const buttonText = countdown > 0
  ? `${countdown}s Retry`
  : 'Send Code';
🔑 Key Points
  • Use setTimeout/setInterval for countdown
  • Clear timers in cleanup function to prevent memory leaks
  • Reset button state when countdown ends
  • In real projects, call actual SMS API
  • Add phone validation and anti-spam mechanisms
🌍 Real-World Scenarios
  • SMS verification during registration/login
  • Phone verification for password reset
  • Binding/unbinding phone numbers
  • Secondary verification for sensitive operations (transfers)
  • Email verification countdown (similar pattern)