Bug: useState with class as initial state throws an error

Using a JavaScript class as initial state in useState throws an error. This is because mountState check if the initial state is a function by typeof initialState === 'function' and classes are technically functions. However since ES6+, I feel like most developers don’t consider classes functions because of the less prototype-inheritance feel since ES6 and the class keyword.

React version: 17.0.2

Steps To Reproduce

1. Define an ES6 class
2. Use the class as initialState argument to useState

Code example:

import { useState } from "react";
import ReactDOM from "react-dom";

class A {}

function App() {
  const [cls, setCls] = useState(A);
  return <h2>{cls.name}</h2>;
}

ReactDOM.render(<App />, document.body);

The current behavior

TypeError: Cannot call a class as a function
    at _classCallCheck (eval at z (eval.js:42), <anonymous>:3:11)
    at A (VM302 index.js:19)
    at mountState (react-dom.development.js:10436)
    at Object.useState (react-dom.development.js:10919)
    at useState (react.development.js:954)
    at App (VM302 index.js:25)

Alternatively, the error can be TypeError: Class constructor X cannot be invoked without 'new'.

The expected behavior

As mentioned in the description above, I would

• either expect classes to work
• or mention this caveat in the docs.

I guess checking, if the initial state is actually a non-class function, could cause instances of subclasses of functions not to work (depending how the check is done).

[gaearon]

I’d like to see a PR that warns if setState or useState is passed a function whose first letter is capital. That’s enough of a hint to find the common cases.

[bvaughn]

I don’t consider this a bug.

As the issue description mentions, useState supports two formats:

1. Eagerly initialize the value (e.g. useState('value'))
2. Lazily initialize the value with a function (e.g. useState(() => 'value'))

React decides which one you’ve done using the typeof operator. (I am not aware of an alternative to this approach but please feel free to share one if you have an idea.)

In JavaScript, the typeof a class is "function" so React thinks you’re using the second format and tries to call the “function” which causes an error to be thrown. To fix this, you can wrap your class value with a function, like so:

useState(() => A);

I’ll tag this as a discussion for now, but I’m not sure this is something that we’ll change.