Using useState but forgetting to initialize it with a default value

When using React’s useState hook, forgetting to provide an initial value can lead to subtle bugs and unexpected behavior in your components. Here’s what you need to know about proper initialization:

The Problem: Undefined State

If you don’t provide an initial value:

const [value, setValue] = useState(); // ❌ No initial value

Your state will be undefined, which can cause:

• Type errors when accessing properties (Cannot read property X of undefined)
• Unexpected rendering behavior
• Problems with conditional rendering

Proper Initialization Techniques

1. Basic Initialization

const [count, setCount] = useState(0); // ✅ Number
const [name, setName] = useState('');  // ✅ String
const [items, setItems] = useState([]); // ✅ Array
const [user, setUser] = useState(null); // ✅ Explicit null

2. Complex Objects

const [formData, setFormData] = useState({
  username: '',
  email: '',
  subscribed: false
});

3. Lazy Initialization (for expensive computations)

const [data, setData] = useState(() => {
  const initialData = calculateExpensiveValue();
  return initialData;
});

Common Pitfalls and Solutions

❌ Problem: Accessing Nested Properties

const [user, setUser] = useState(); // No initial value

// Later...
console.log(user.name); // ❌ TypeError: Cannot read property 'name' of undefined

✅ Solution: Initialize Properly

const [user, setUser] = useState({ name: '', email: '' }); // ✅
console.log(user.name); // '' (safe)

❌ Problem: Array Operations

const [items, setItems] = useState(); // No initial value

// Later...
items.map(item => ...) // ❌ TypeError: Cannot read property 'map' of undefined

✅ Solution: Initialize as Empty Array

const [items, setItems] = useState([]); // ✅
items.map(item => ...) // Works (empty array)

TypeScript Considerations

When using TypeScript, always specify the type:

const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<User | null>(null);

Best Practices

1. Always initialize state – Even if with null or empty values
2. Match the expected shape – Initialize with the complete data structure
3. Consider default values from props:

   function Component({ initialCount = 0 }) {
     const [count, setCount] = useState(initialCount);
     // ...
   }

4. Document your state shape with JSDoc or TypeScript

Real-World Example

❌ Bad (No Initialization)

function UserProfile() {
  const [user, setUser] = useState(); // ❌

  return (
    <div>
      <h1>{user.name}</h1> {/* Will crash */}
    </div>
  );
}

✅ Good (Proper Initialization)

function UserProfile() {
  const [user, setUser] = useState({
    name: '',
    email: '',
    avatar: null
  }); // ✅

  return (
    <div>
      <h1>{user.name}</h1> {/* Safe - renders empty string */}
    </div>
  );
}

When You Might Skip Initialization

The only acceptable case is when you immediately set the state in an effect:

function Component() {
  const [data, setData] = useState(); // ❓

  useEffect(() => {
    fetchData().then(setData);
  }, []);

  if (!data) return <Loading />; // Must handle undefined

  return <div>{data}</div>;
}

Even in this case, it’s often better to initialize with null for clarity:

const [data, setData] = useState(null); // ✅ More explicit

Key Takeaways

1. Always provide an initial value to useState
2. Initialize with the complete expected shape of your data
3. Use null for values that will be loaded asynchronously
4. In TypeScript, always specify the type parameter
5. Handle loading states explicitly when data might be undefined

Proper initialization prevents runtime errors and makes your component’s behavior more predictable.