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.

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.

TypeScript Playground

What do you think?

official_dulin @mrdulin

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

Comments 0 total