Local Component State

useState Hook

useState is used for local component state that doesn't need to be shared.

Common Use Cases:

• Loading states
• Modal open/close
• Input focus
• Temporary UI state
• Component-specific data

Example:

'use client';
import { useState } from 'react';

export function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedItem, setSelectedItem] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  
  const handleOpen = () => setIsOpen(true);
  const handleClose = () => setIsOpen(false);
  
  return (
    <div>
      <Button onClick={handleOpen}>Open</Button>
      {isOpen && (
        <Modal onClose={handleClose}>
          {/* Content */}
        </Modal>
      )}
    </div>
  );
}

useReducer Hook

For complex local state with multiple actions:

'use client';
import { useReducer } from 'react';

type State = {
  count: number;
  step: number;
};

type Action = 
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'reset' }
  | { type: 'setStep'; payload: number };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + state.step };
    case 'decrement':
      return { ...state, count: state.count - state.step };
    case 'reset':
      return { ...state, count: 0 };
    case 'setStep':
      return { ...state, step: action.payload };
    default:
      return state;
  }
}

export function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0, step: 1 });
  
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}