Can useState take a function as an initial value?

Yes, useState can take a function as an initial value, and this is a useful feature in React called lazy initialization. This function is also known as initializer function.

When you call useState(initialValue), you normally pass in a value directly:

const [count, setCount] = useState(0);  // initial value is 0

But if calculating that initial value is expensive or involves logic, you can pass a function that returns the value:

const [count, setCount] = useState(() => {
// This function only runs once — when the component first renders
return expensiveComputation();
});

This function avoids doing heavy computation on every render. If you don't use this function form and invokes it directly, the function will run everytime the component renders and impact the performance. For example, the below usage is not recommended.

const [count, setCount] = useState(expensiveComputation());