Forgetting default state values in functional components

Forgetting to set default state values in functional components can lead to unexpected behavior, runtime errors, or undefined values in your React app. This issue often occurs when using the useState hook without providing an initial state, especially for complex objects or arrays.

Common Causes & Fixes:

1. Incorrect: Missing Default State in useState()
   • Incorrect: import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(); // No default value (undefined) return <h1>Count: {count}</h1>; // Displays "Count: undefined" }
   • Fix: Provide a default value to avoid undefined issues: function Counter() { const [count, setCount] = useState(0); // Default value set to 0 return <h1>Count: {count}</h1>; }
2. Incorrect: Using useState for Objects Without Initial Values
   • Incorrect: function UserProfile() { const [user, setUser] = useState(); // `user` is undefined return <h1>{user.name}</h1>; // Error: Cannot read property 'name' of undefined }
   • Fix: Set an initial empty object or default properties: function UserProfile() { const [user, setUser] = useState({ name: "Guest", age: 0 }); // Default object return <h1>{user.name}</h1>; }
3. Incorrect: Initializing Arrays Without Default Values
   • Incorrect: function ItemList() { const [items, setItems] = useState(); // `items` is undefined return <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>; // Error }
   • Fix: Provide an empty array as the initial state: function ItemList() { const [items, setItems] = useState([]); // Default empty array return <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>; }
4. Incorrect: Using Conditional Rendering Without Default States
   • Incorrect: function Dashboard() { const [isLoggedIn, setIsLoggedIn] = useState(); // undefined by default return isLoggedIn && <h1>Welcome back!</h1>; // May render nothing unexpectedly }
   • Fix: Initialize with false or a logical default: function Dashboard() { const [isLoggedIn, setIsLoggedIn] = useState(false); // Default to false return isLoggedIn && <h1>Welcome back!</h1>; }

Correct Example:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Default value to 0

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increase</button>
    </div>
  );
}

export default Counter;

Why This Matters:

• Undefined state values can cause runtime errors or unexpected UI behavior.
• Default values ensure consistent rendering and prevent crashes.
• Initial state setup is crucial for controlled components, forms, and conditional rendering.

Best Practices:

• Always provide initial state values when using useState.
• For objects or arrays, initialize with {} or [] to avoid undefined errors.
• Use TypeScript or PropTypes to catch potential issues early.