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)