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. What do you think?
Top comments (0)