CODEWITHSUNDEEP
javascriptreactjstypescriptasynchronousasync-await
aioobe
aioobe

Reputation: 420921

Wait for initialization of lazy loaded state

I have a button and an onClick handler. The first think I do in the onClick handler is

if (this.state.lazyLoadedData === undefined) {
    await this.loadData();
}

My problem is that if I click the button two times quickly, this.loadData() get's executed twice.

What is the typescript/react idiomatic way of solving this?

Upvotes: 1

Views: 563

Answers (1)

artem
artem

Reputation: 51559

The idiomatic way is to use an explicit promise for accessing lazily loaded data, always.

declare and initialize it somewhere

loadDataPromise: Promise<YourDataType> | undefined = undefined;

then, in onclick handler

if (!this.loadDataPromise) {
    this.loadDataPromise = this.loadData();
}

this.loadDataPromise.then(yourDataHere => {
});

Upvotes: 2

Related Questions