Understanding the useEffect Hook in React

# Using Vite (recommended)
npm create vite@latest my-effect-demo -- --template react
cd my-effect-demo
npm install
# Or using Create React App
npx create-react-app my-effect-demo
cd my-effect-demo

// src/Timer.jsx
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // This code runs after the component renders
    console.log('Timer component mounted!');
    
    // Create an interval that increments the seconds every 1000ms
    const intervalId = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);
    
    // This cleanup function runs when the component unmounts
    return () => {
      console.log('Timer component unmounted!');
      clearInterval(intervalId); // Clean up the interval
    };
  }, []); // Empty dependency array means this effect runs once after initial render
  
  return (
    <div className="timer">
      <h2>Timer Demo</h2>
      <p>Seconds elapsed: {seconds}</p>
    </div>
  );
}

export default Timer;

// src/App.jsx
import React, { useState } from 'react';
import Timer from './Timer';
import './App.css';

function App() {
  const [showTimer, setShowTimer] = useState(true);

  return (
    <div className="App">
      <h1>useEffect Demo</h1>
      
      <button onClick={() => setShowTimer(!showTimer)}>
        {showTimer ? 'Hide Timer' : 'Show Timer'}
      </button>
      
      {showTimer && <Timer />}
    </div>
  );
}

export default App;

npm run dev  # For Vite
# or
npm start    # For Create React App

// src/LocalStorageForm.jsx
import React, { useState, useEffect } from 'react';

function LocalStorageForm() {
  // Your code goes here!
  // 1. Setup state for form fields
  // 2. Load initial values from localStorage
  // 3. Add effect to sync state changes to localStorage
  // 4. Create a form UI
  
  return (
    <div className="storage-form">
      <h2>Persistent Form</h2>
      {/* Your form JSX here */}
    </div>
  );
}

export default LocalStorageForm;

// src/LocalStorageForm.jsx - Solution
import React, { useState, useEffect } from 'react';

function LocalStorageForm() {
  // Step 1: Setup state with default values
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    theme: 'light'
  });
  
  // Step 2: Load initial values from localStorage on mount
  useEffect(() => {
    const savedData = localStorage.getItem('formData');
    if (savedData) {
      try {
        // Parse stored JSON
        const parsedData = JSON.parse(savedData);
        setFormData(parsedData);
        console.log('Loaded data from localStorage:', parsedData);
      } catch (error) {
        console.error('Failed to parse localStorage data:', error);
        // If parsing fails, clear localStorage to prevent future errors
        localStorage.removeItem('formData');
      }
    }
  }, []); // Empty dependency array = run once on mount
  
  // Step 3: Sync state changes to localStorage
  useEffect(() => {
    // Only save if we have some actual data (not the initial empty state)
    if (formData.name || formData.email) {
      localStorage.setItem('formData', JSON.stringify(formData));
      console.log('Saved to localStorage:', formData);
    }
  }, [formData]); // Run whenever formData changes
  
  // Handle input changes
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevData => ({
      ...prevData,
      [name]: value
    }));
  };
  
  // Handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Form submitted with: ${JSON.stringify(formData, null, 2)}`);
  };
  
  // Handle form reset (clear localStorage too)
  const handleReset = () => {
    localStorage.removeItem('formData');
    setFormData({
      name: '',
      email: '',
      theme: 'light'
    });
  };
  
  return (
    <div className="storage-form">
      <h2>Persistent Form</h2>
      <p>This form remembers your input even if you reload the page!</p>
      
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="name">Name:</label>
          <input
            type="text"
            id="name"
            name="name"
            value={formData.name}
            onChange={handleChange}
          />
        </div>
        
        <div className="form-group">
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            id="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
          />
        </div>
        
        <div className="form-group">
          <label htmlFor="theme">Theme:</label>
          <select
            id="theme"
            name="theme"
            value={formData.theme}
            onChange={handleChange}
          >
            <option value="light">Light</option>
            <option value="dark">Dark</option>
            <option value="system">System</option>
          </select>
        </div>
        
        <div className="form-actions">
          <button type="submit">Submit</button>
          <button type="button" onClick={handleReset}>
            Reset Form & Clear Storage
          </button>
        </div>
      </form>
    </div>
  );
}

export default LocalStorageForm;