DEV Community


Posted on

Should the useState hook verify that the lazy initial state function must be synchronous

By now, you can pass asynchronous function to the ReactJS useState hook to lazy initialize the state. But this seems not correct, the state will be a JavaScript promise.

const [state] = useState(async () => 'a');
console.log(state); // "state" is a promise.
Enter fullscreen mode Exit fullscreen mode

So I think ReactJS useState hook should validate this function to make sure it is synchronous.

Something like this:

const syncCallback = () => 'a';
const asyncCallback = async () => 'b';

const AsyncFunction = (async () => { }).constructor;

function isAsync(fn: Function) {
  return fn instanceof AsyncFunction;

function useState<S>(initialState: S | (() => S)) {
  if (typeof initialState === 'function' && isAsync(initialState)) throw new Error('initial state function must be synchronous.')
  if (initialState instanceof Function) {
    return initialState();
  return initialState

const state1 = useState(syncCallback); // correct usage
console.log('state1: ', state1); 
const state2 = useState(asyncCallback); // Only allow synchronous function, so it will throw error to developer.
Enter fullscreen mode Exit fullscreen mode

TypeScript Playground

What do you think?

Top comments (0)