Reasons for Advocating Functional Programming in React

class UserProfile extends React.Component {
  state = { name: '', loading: false };
  
  async componentDidMount() {
    this.setState({ loading: true });
    const user = await fetchUser(this.props.userId);
    this.setState({ name: user.name, loading: false });
  }
  
  render() {
    return <div>{this.state.loading ? 'Loading...' : this.state.name}</div>;
  }
}

function UserProfile({ userId }) {
  const { user, loading } = useUser(userId);
  
  if (loading) return <div>Loading...</div>;
  return <div>{user.name}</div>;
}
 
// Only need to check props during testing (Hook is tested separately)

function formatPrice(price, currency = 'USD') {
  return `${currency} ${price.toFixed(2)}`;
}
 
// Predictable results based on input
expect(formatPrice(10.5)).toBe('USD 10.50');
expect(formatPrice(20, 'KRW')).toBe('KRW 20.00');

// When maintaining immutability
const TodoItem = React.memo(({ todo, onToggle }) => (
  <div onClick={() => onToggle(todo.id)}>
    {todo.text} {todo.completed ? '✓' : '○'}
  </div>
));
 
// No re-rendering if props have the same reference

function TodoList({ todos, filter }) {
  // Re-execute filtering only when the todos array is newly created
  const filteredTodos = useMemo(() => 
    todos.filter(todo => todo.category === filter), 
    [todos, filter]
  );
  
  // No function re-creation if dependencies do not change
  const handleToggle = useCallback((id) => 
    setTodos(prev => prev.map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo

// ❌ Direct modification - Optimization tools cannot detect changes
function badUpdate() {
  const newTodos = todos;
  newTodos[0].completed = true;
  setTodos(newTodos); // No re-rendering because the reference is the same
}
 
// ✅ Creating new objects - Optimization tools work accurately
function goodUpdate() {
  setTodos(prev => prev.map((todo, index) => 
    index === 0 ? { ...todo, completed: true } : todo
  ));
}

// ❌ Deep Comparison - Checks all properties recursively (slow)
function deepEqual(obj1, obj2) {
  // Must compare all key-values of the object
  return JSON.stringify(obj1) === JSON.stringify(obj2);
}
 
// ✅ Reference Comparison - Only checks memory addresses (fast)
function shallowEqual(obj1, obj2) {
  return obj1 === obj2; // Ends with a single comparison
}

function Counter() {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({ name: 'John', age: 25 });
  
  // ✅ Primitives automatically ensure immutability
  const increment = () => setCount(prev => prev + 1);
  
  // ✅ Objects must be newly created to detect changes
  const updateAge = () => setUser(prev => ({ ...prev, age: prev.age + 1 }));

function DataTable({ items }) {
  // No re-sorting if items have the same reference
  const sortedItems = useMemo(() => {
    console.log('Sorting executed!'); // Check when it executes
    return [...items].sort((a, b) => a.name.localeCompare(b.name));
  }, [items]);
  
  return (
    <table>
     {sortedItems.map(item => (
        <tr key={item.id}>
          <td>{item.name}</td>

function ProductList({ products, searchTerm }) {
  // Does not refilter if searchTerm or products have not changed
  const filteredProducts = useMemo(() => {
    console.log('Executing filter!');
    return products.filter(p => 
      p.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [products, searchTerm]);
  
  return <div>{filteredProducts.map(/* ... */)}</div>;
}

// ❌ Not pure - depends on external state
let discount = 0.1;
function calculatePrice(price) {
  return price * (1 - discount); // References external variable
}
 
// ✅ Pure - all inputs are passed as parameters
function calculatePrice(price, discount = 0) {
  return price * (1 - discount);
}

function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { id: Date.now(), text: action.text, completed: false }];
    case 'TOGGLE_TODO':
      return state.map(todo => 
        todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
      );
    case 'DELETE_TODO':
      return state.filter(todo => todo.id !== action.id);
    default:
      return

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : initialValue;
  });
  
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  
  return [value, setValue];
}
 
// Can be reused in multiple components
function Settings