Component State Fundamentals

Props vs. State Example

// Parent component passing props
function Parent() {
  // This is state in the Parent
  const [count, setCount] = useState(0);
  
  // Handler to update state
  const incrementCount = () => {
    setCount(count + 1);
  };
  
  return (
    <div>
      <h2>Parent Count: {count}</h2>
      <button onClick={incrementCount}>Increment</button>
      
      {/* Passing state as props to child */}
      <Child count={count} onIncrement={incrementCount} />
    </div>
  );
}

// Child receives props, but also has its own state
function Child({ count, onIncrement }) {
  // This is state internal to the Child
  const [childCount, setChildCount] = useState(0);
  
  const incrementChildCount = () => {
    setChildCount(childCount + 1);
  };
  
  return (
    <div className="child">
      <h3>Received from Parent: {count}</h3>
      <button onClick={onIncrement}>Increment Parent Count</button>
      
      <h3>Child's Own Count: {childCount}</h3>
      <button onClick={incrementChildCount}>Increment Child Count</button>
    </div>
  );
}

Examples of Different State Types

// Local UI State
function Accordion() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <div>
      <h3 onClick={() => setIsOpen(!isOpen)}>
        Click to {isOpen ? 'collapse' : 'expand'}
      </h3>
      {isOpen && <p>This content is dynamically shown/hidden.</p>}
    </div>
  );
}

// Form State
function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  // More form logic...
}

// Application State (often managed with Context or Redux)
function ThemeProvider() {
  const [theme, setTheme] = useState('light');
  
  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };
  
  // Provide theme context to the application...
}

// Server Cache State (often managed with React Query or SWR)
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    const fetchUser = async () => {
      try {
        setLoading(true);
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    
    fetchUser();
  }, [userId]);
  
  // Render based on loading, error, and user state...
}

Basic State in Class Components

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    
    // Initialize state in the constructor
    this.state = {
      count: 0
    };
    
    // Bind event handlers
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
  }
  
  increment() {
    // Update state with setState
    this.setState({ count: this.state.count + 1 });
  }
  
  decrement() {
    this.setState({ count: this.state.count - 1 });
  }
  
  render() {
    return (
      <div>
        <h2>Count: {this.state.count}</h2>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    );
  }
}

// Incorrect: May lead to stale state issues
increment() {
  this.setState({ count: this.state.count + 1 });
}

// Correct: Using functional update
increment() {
  this.setState(prevState => ({
    count: prevState.count + 1
  }));
}

// Component with multiple state properties
class UserForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: '',
      preferences: {
        newsletter: false,
        darkMode: false
      }
    };
  }
  
  updateName(name) {
    // Only updates name, other state properties are preserved
    this.setState({ name });
  }
  
  toggleNewsletter() {
    // Nested objects aren't deeply merged - must include the entire nested object
    this.setState({
      preferences: {
        ...this.state.preferences,
        newsletter: !this.state.preferences.newsletter
      }
    });
  }
}

Basic useState Example

import React, { useState } from 'react';

function Counter() {
  // useState returns a state value and a function to update it
  const [count, setCount] = useState(0);
  
  const increment = () => {
    setCount(count + 1);
  };
  
  const decrement = () => {
    setCount(count - 1);
  };
  
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

function UserForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [subscribed, setSubscribed] = useState(false);
  
  return (
    <form>
      <div>
        <label>Name:</label>
        <input 
          type="text" 
          value={name} 
          onChange={e => setName(e.target.value)} 
        />
      </div>
      
      <div>
        <label>Email:</label>
        <input 
          type="email" 
          value={email} 
          onChange={e => setEmail(e.target.value)} 
        />
      </div>
      
      <div>
        <label>
          <input 
            type="checkbox" 
            checked={subscribed} 
            onChange={e => setSubscribed(e.target.checked)} 
          />
          Subscribe to newsletter
        </label>
      </div>
    </form>
  );
}

function UserProfile() {
  const [user, setUser] = useState({
    name: '',
    email: '',
    preferences: {
      newsletter: false,
      darkMode: false
    }
  });
  
  const updateName = (name) => {
    // Must include all properties since useState doesn't merge
    setUser({
      ...user,  // spread the existing state
      name      // update the name property
    });
  };
  
  const toggleNewsletter = () => {
    // Nested objects require deeper spreading
    setUser({
      ...user,
      preferences: {
        ...user.preferences,
        newsletter: !user.preferences.newsletter
      }
    });
  };
}

Using Functional Updates

function Counter() {
  const [count, setCount] = useState(0);
  
  // Incorrect: May not use latest state due to closures
  const increment = () => {
    setCount(count + 1);  // Uses value from render closure
  };
  
  // Correct: Always uses latest state
  const betterIncrement = () => {
    setCount(prevCount => prevCount + 1);
  };
  
  // This is particularly important with multiple updates
  const incrementThree = () => {
    // This might not increment by 3 because all updates
    // reference the same closure value of count
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };
  
  // This will correctly increment by 3
  const betterIncrementThree = () => {
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
  };
  
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={betterIncrement}>+1</button>
      <button onClick={betterIncrementThree}>+3</button>
    </div>
  );
}

function TaskManager() {
  const [tasks, setTasks] = useState([]);
  
  const addTask = (newTask) => {
    // Using functional update ensures we always have the latest state
    setTasks(prevTasks => [...prevTasks, newTask]);
  };
  
  const removeTask = (taskId) => {
    setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId));
  };
  
  const updateTask = (taskId, updates) => {
    setTasks(prevTasks => 
      prevTasks.map(task => 
        task.id === taskId ? { ...task, ...updates } : task
      )
    );
  };
}

Lazy State Initialization

// Without lazy initialization
function UserPreferences() {
  // This runs on every render
  const [preferences, setPreferences] = useState(
    JSON.parse(localStorage.getItem('preferences')) || { 
      theme: 'light', 
      fontSize: 'medium' 
    }
  );
  
  // ...
}

// With lazy initialization
function BetterUserPreferences() {
  // The function only runs once during initial render
  const [preferences, setPreferences] = useState(() => {
    // Expensive operation only happens once
    const savedPrefs = localStorage.getItem('preferences');
    return savedPrefs 
      ? JSON.parse(savedPrefs) 
      : { theme: 'light', fontSize: 'medium' };
  });
  
  // ...
}

Using Derived Values

// Bad: Redundant state
function CartWithRedundantState() {
  const [items, setItems] = useState([
    { id: 1, name: 'Product 1', price: 10, quantity: 2 },
    { id: 2, name: 'Product 2', price: 15, quantity: 1 }
  ]);
  const [itemCount, setItemCount] = useState(3);  // Total quantity
  const [totalPrice, setTotalPrice] = useState(35);  // Total price
  
  const addItem = (item) => {
    setItems([...items, item]);
    // Now we need to remember to update these derived values
    setItemCount(itemCount + item.quantity);
    setTotalPrice(totalPrice + (item.price * item.quantity));
  };
  
  // This approach is error-prone and can lead to inconsistencies
}

// Good: Calculate derived values when needed
function CartWithDerivedValues() {
  const [items, setItems] = useState([
    { id: 1, name: 'Product 1', price: 10, quantity: 2 },
    { id: 2, name: 'Product 2', price: 15, quantity: 1 }
  ]);
  
  // Calculate these values from the primary state
  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);
  const totalPrice = items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
  
  const addItem = (item) => {
    setItems([...items, item]);
    // No need to update derived values; they're recalculated on render
  };
}

function ParentWithSharedState() {
  // State is lifted to the parent component
  const [count, setCount] = useState(0);
  
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  
  return (
    <div>
      <h2>Count: {count}</h2>
      
      {/* Both children work with the same state */}
      <ChildA 
        count={count} 
        onIncrement={increment} 
      />
      
      <ChildB 
        count={count} 
        onDecrement={decrement} 
      />
    </div>
  );
}