171

I have some setup I want during a constructor, but it seems that is not allowed

no async const

Which means I can't use:

await

How else should I do this?

Currently I have something outside like this, but this is not guaranteed to run in the order I want?

async function run() {
  let topic;
  debug("new TopicsModel");
  try {
    topic = new TopicsModel();
  } catch (err) {
    debug("err", err);
  }

  await topic.setup();

12 Answers 12

102

A constructor must return an instance of the class it 'constructs'. Therefore, it's not possible to return Promise<...> and await for it.

You can:

  1. Make your public setup async.

  2. Do not call it from the constructor.

  3. Call it whenever you want to 'finalize' object construction.

    async function run() 
    {
        let topic;
        debug("new TopicsModel");
        try 
        {
            topic = new TopicsModel();
            await topic.setup();
        } 
        catch (err) 
        {
            debug("err", err);
        }
    }
    
5
  • 32
    Can also use a factory (method?) in your class to create one, that is async. topic = await TopicsModel.create();
    – Ascherer
    Feb 16, 2017 at 2:49
  • It would be more accurate to say "its not possible to directly return Promise<...>". See my answer for details of how to successfully exploit this subtle but important distinction.
    – Peter Wone
    Jul 24, 2017 at 2:05
  • A constructor doesn't return anything. Calling new MyClass creates an object, stores it in this and calls MyClass.constructor to initialise it. It is the new that returns it, not the constructor. So it makes sense to talk about the constructor returning a Promise.
    – Denis Howe
    Aug 14, 2019 at 10:46
  • Class constructors cannot be invoked without "new". So it makes no sense to tack about constructor returning promise even purely from theoretical point of view in javascript/typescript.
    – Amid
    Aug 15, 2019 at 14:15
  • developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… disagrees with you. It says The constructor property returns a reference to the Object constructor function that created the instance object. What new creates is an empty closure. The object proper is the sum of its properties, and these are created by the constructor function.
    – Peter Wone
    Nov 26, 2019 at 22:26
89

Readiness design pattern

It has been claimed that

A constructor must return an instance of the class it 'constructs'. Therefore, it's not possible to return Promise<...> and await for it.

This is not true. There is no requirement for said promise to be at the root of the object graph returned by the constructor.

Don't put the object in a promise, put a promise in the object.

Readiness is a property of the object. So make it a property of the object.

The awaitable initialise method described in the accepted answer has a serious limitation. Using await directly on the construction expression like this means only execution path can be implicitly contingent on the object being ready. This is fine for code with guaranteed linear execution but in multi-threaded or event driven code it's untenable.

You could capture the task/promise and await that, but how do you manage making this available to every context that depends on it?

The problem is more tractable when correctly framed. The objective is not to wait on construction but to wait on readiness of the constructed object. These are two completely different things. It is even possible for something like a database connection object to be in a ready state, go back to a non-ready state, then become ready again.

How can we determine readiness if it depends on activities that may not be complete when the constructor returns? Quite obviously readiness is a property of the object. Many frameworks directly express the notion of readiness. In JavaScript we have the Promise, and in C# we have the Task. Both have direct language support for object properties.

Expose the construction completion promise as a property of the constructed object. When the asynchronous part of your construction finishes it should resolve the promise.

It doesn't matter whether .then(...) executes before or after the promise resolves. The promise specification states that invoking then on an already resolved promised simply executes the handler immediately.

class Foo {
  public Ready: Promise.IThenable<any>;
  constructor() {
    ...
    this.Ready = new Promise((resolve, reject) => {
      $.ajax(...).then(result => {
        // use result
        resolve(undefined);
      }).fail(reject);
    });
  }
}

var foo = new Foo();
foo.Ready.then(() => {
  // do stuff that needs foo to be ready, eg apply bindings
});
// keep going with other stuff that doesn't need to wait for foo

// using await
// code that doesn't need foo to be ready
await foo.Ready;
// code that needs foo to be ready

Why resolve(undefined); instead of resolve();? Because ES6. Adjust as required to suit your target.

Using await

In a comment it has been suggested that I should have framed this solution with await to more directly address the question as asked.

You can use await with the Ready property as shown in the example above. I'm not a big fan of await because it requires you to partition your code by dependency. You have to put all the dependent code after await and all the independent code before it. This can obscure the intent of the code.

I encourage people to think in terms of call-backs. Mentally framing the problem like this is more compatible with languages like C. Promises are arguably descended from the pattern used for IO completion.

Lack of enforcement as compared to factory pattern

One punter thinks this pattern "is a bad idea because without a factory function, there's nothing to enforce the invariant of checking the readiness. It's left to the clients, which you can practically guarantee will mess up from time to time."

If you take this position then how will you stop people from building factory methods that don't enforce the check? Where do you draw the line? For example, would you forbid the division operator because there's nothing stopping people from passing a zero divisor? The hard truth is you have to learn the difference between domain specific code and framework code and apply different standards, seasoned with some common sense.


Antecedents

This is original work by me. I devised this design pattern because I was unsatisfied with external factories and other such workarounds. Despite searching for some time, I found no prior art for my solution, so I'm claiming credit as the originator of this pattern until disputed.

Nevertheless, in 2020 I discovered that in 2013 Stephen Cleary posted a very similar solution to the problem. Looking back through my own work the first vestiges of this approach appear in code I worked on around the same time. I suspect Cleary put it all together first but he didn't formalise it as a design pattern or publish it where it would be easily found by others with the problem. Moreover, Cleary deals only with construction which is only one application of the Readiness pattern (see below).

Summary

The pattern is

  • put a promise in the object it describes
  • expose it as a property named Ready
  • always reference the promise via the Ready property (don't capture it in a client code variable)

This establishes clear simple semantics and guarantees that

  • the promise will be created and managed
  • the promise has identical scope to the object it describes
  • the semantics of readiness dependence are conspicuous and clear in client code
  • if the promise is replaced (eg a connection goes unready then ready again due to network conditions) client code referring to it via thing.Ready will always use the current promise

This last one is a nightmare until you use the pattern and let the object manage its own promise. It's also a very good reason to refrain from capturing the promise into a variable.

Some objects have methods that temporarily put them in an invalid condition, and the pattern can serve in that scenario without modification. Code of the form obj.Ready.then(...) will always use whatever promise property is returned by the Ready property, so whenever some action is about to invalidate object state, a fresh promise can be created.

Closing notes

The Readiness pattern isn't specific to construction. It is easily applied to construction but it's really about ensuring that state dependencies are met. In these days of asynchronous code you need a system, and the simple declarative semantics of a promise make it straightforward to express the idea that an action should be taken ASAP, with emphasis on possible. Once you start framing things in these terms, arguments about long running methods or constructors become moot.

Deferred initialisation still has its place; as I mentioned you can combine Readiness with lazy load. But if chances are that you won't use the object, then why create it early? It might be better to create on demand. Or it might not; sometimes you can't tolerate delay between the recognition of need and fulfilment.

There's more than one way to skin a cat. When I write embedded software I create everything up front including resource pools. This makes leaks impossible and memory demands are known at compile time. But that's only a solution for a small closed problem space.

9
  • 11
    I just love it when people vote constructive answers down with no explanation whatsoever. Even suggestions that are bad ideas deserve an explanation of why they're bad ideas.
    – Peter Wone
    Sep 1, 2019 at 23:49
  • 6
    This is a bad idea because without a factory function, there's nothing to enforce the invariant of checking the readiness. It's left to the clients, which you can practically guarantee will mess up from time to time. Feb 8, 2021 at 9:43
  • 6
    Well, you did ask. But sure, we may as well all program in C, right, because we're superheroes who always remember every little thing and don't need the computer to help us out at all. It just takes discipline, doesn't it. Feb 9, 2021 at 14:37
  • 1
    Test plans, unit tests, experience. I have an entire application that's been in commercial service for eight years with only one service call for an expired cert. You're right, I did ask. And your opinion was worth a full consideration; the argument is not without merit.
    – Peter Wone
    Feb 9, 2021 at 21:46
  • 7
    I prefer to make the property private, and make everything that is publicly exposed (and requires "readiness") be exposed as a promise instead, and await internally. This ensures readiness is an implementation detail that no other component has to care about. Naturally this doesn't fit the bill every single time, just like every other pattern, but it's my go-to when it's possible, because it reduces design complexity.
    – AnorZaken
    Dec 8, 2021 at 15:44
38

Use an asynchronous factory method instead.

class MyClass {
   private mMember: Something;

   constructor() {
      this.mMember = await SomeFunctionAsync(); // error
   }
}

Becomes:

class MyClass {
   private mMember: Something;

   // make private if possible; I can't in TS 1.8
   constructor() {
   }

   public static CreateAsync = async () => {
      const me = new MyClass();
      
      me.mMember = await SomeFunctionAsync();

      return me;
   };
}

This will mean that you will have to await the construction of these kinds of objects, but that should already be implied by the fact that you are in the situation where you have to await something to construct them anyway.

There's another thing you can do but I suspect it's not a good idea:

// probably BAD
class MyClass {
   private mMember: Something;

   constructor() {
      this.LoadAsync();
   }

   private LoadAsync = async () => {
      this.mMember = await SomeFunctionAsync();
   };
}

This can work and I've never had an actual problem from it before, but it seems to be dangerous to me, since your object will not actually be fully initialized when you start using it.

Another way to do it, which might be better than the first option in some ways, is to await the parts, and then construct your object after:

export class MyClass {
   private constructor(
      private readonly mSomething: Something,
      private readonly mSomethingElse: SomethingElse
   ) {
   }

   public static CreateAsync = async () => {
      const something = await SomeFunctionAsync();
      const somethingElse = await SomeOtherFunctionAsync();

      return new MyClass(something, somethingElse);
   };
}
7
  • is this dependent on some nextTick magic to happen before the object is really ready then?
    – dcsan
    Jul 14, 2019 at 21:11
  • @dcsan you need to await the call to get the object. const myObject = await MyClass.CreateAsync(); Jul 15, 2019 at 1:03
  • i was talking about the 2nd option below, which looks a bit less typing, but has the gotcha.
    – dcsan
    Jul 15, 2019 at 18:14
  • 1
    @dcsan I guess it will depend on your design, but I would avoid it completely if possible. Jul 15, 2019 at 19:44
  • 2
    Last approach is the best one on my opinion. It doesn't let call public constructor and provides only one correct way to developer. Aug 16, 2020 at 4:00
15

I've found a solution that looks like

export class SomeClass {
  private initialization;

  // Implement async constructor
  constructor() {
    this.initialization = this.init();
  }

  async init() {
    await someAsyncCall();
  }

  async fooMethod() {
    await this.initialization();
    // ...some other stuff
  }

  async barMethod() {
    await this.initialization();
    // ...some other stuff
  }

It works because Promises that powers async/await, can be resolved multiple times with the same value.

3
  • 1
    Only the problem is that everything inside of the class must be async. But nice solution
    – Fis
    Jun 15, 2021 at 17:39
  • I'm using typescript and im getting Uncaught TypeError: this.initialization is not a function when calling await this.initialization(); but await this.initialization; works for me, not really sure why Oct 26, 2021 at 21:22
  • 2
    @JuanJoséRamírez Typescript is right. this.initialization is a promise, not a function.
    – Quang Lam
    Apr 17, 2022 at 8:23
11

Use a private constructor and a static factory method FTW. It is the best way to enforce any validation logic or data enrichment, encapsulated away from a client.

class Topic {
  public static async create(id: string): Promise<Topic> {
    const topic = new Topic(id);
    await topic.populate();
    return topic;
  }

  private constructor(private id: string) {
    // ...
  }

  private async populate(): Promise<void> {
    // Do something async. Access `this.id` and any other instance fields
  }
}

// To instantiate a Topic
const topic = await Topic.create('1234');
4
  • This suggests that async constructors should be allowed. The difference between construction and any other function invocation is arbitrary. It would be weird for new to sometimes result in a promise, but I think we could get over it: await new Topic()
    – N8allan
    Nov 8, 2022 at 22:22
  • 2
    I don't think so. Construction of an object is special. The creation of an object guarantees that it is ready to be used. There are genuine reasons were readiness requires checking with a remote dependency, hence why we look for ways to guarantee async readiness.
    – Hady
    Nov 9, 2022 at 23:07
  • Couldn't you say the same thing about any value that is returned by a function? A constructor is a function that returns an object. If async constructors were functions that returned promises of an object; this seems conceptually consistent. Where this becomes a potential challenge is on the implementation of the constructor, because "super" is now a promise. Maybe "this" could be implicitly awaited in the constructor or something.
    – N8allan
    Nov 10, 2022 at 15:31
  • 1
    What I really like about this approach is that it enables you to do the following: Return an error type/class instead of throwing it like in fp-ts or golang. This way you can even enforce error handling on the client side if something in the construction process goes wrong (at compile time!).
    – dude
    Oct 23 at 15:14
10

I know it's quite old but another option is to have a factory that will create the object and wait for its initialization:

// Declare the class
class A {

  // Declare class constructor
  constructor() {

    // We didn't finish the async job yet
    this.initialized = false;

    // Simulates async job, it takes 5 seconds to have it done
    setTimeout(() => {
      this.initialized = true;
    }, 5000);
  }

  // do something usefull here - thats a normal method
  useful() {
    // but only if initialization was OK
    if (this.initialized) {
      console.log("I am doing something useful here")

    // otherwise throw an error which will be caught by the promise catch
    } else {
      throw new Error("I am not initialized!");
    }
  }

}

// factory for common, extensible class - that's the reason for the constructor parameter
// it can be more sophisticated and accept also params for constructor and pass them there
// also, the timeout is just an example, it will wait for about 10s (1000 x 10ms iterations
function factory(construct) {

  // create a promise
  var aPromise = new Promise(
    function(resolve, reject) {

      // construct the object here
      var a = new construct();

      // setup simple timeout
      var timeout = 1000;

      // called in 10ms intervals to check if the object is initialized
      function waiter() {
    
        if (a.initialized) {
          // if initialized, resolve the promise
          resolve(a);
        } else {

          // check for timeout - do another iteration after 10ms or throw exception
          if (timeout > 0) {     
            timeout--;
            setTimeout(waiter, 10);            
          } else {            
            throw new Error("Timeout!");            
          }

        }
      }
  
      // call the waiter, it will return almost immediately
      waiter();
    }
  );

  // return promise of the object being created and initialized
  return a Promise;
}


// this is some async function to create object of A class and do something with it
async function createObjectAndDoSomethingUseful() {

  // try/catch to capture exceptions during async execution
  try {
    // create object and wait until its initialized (promise resolved)
    var a = await factory(A);
    // then do something usefull
    a.useful();
  } catch(e) {
    // if class instantiation failed from whatever reason, timeout occured or useful was called before the object finished its initialization
    console.error(e);
  }

}

// now, perform the action we want
createObjectAndDoSomethingUsefull();

// spaghetti code is done here, but async probably still runs
4
  • 1
    can also just use a factory method
    – Ascherer
    Feb 16, 2017 at 2:49
  • I don't like static methods anymore ;)
    – Fis
    May 10, 2017 at 3:59
  • Perfectly valid reason to use static methods.
    – Ascherer
    May 15, 2017 at 5:33
  • I agree and disagree. As I usually use some kind of DIC I am not using static methods anymore. Except that DIC :)
    – Fis
    May 15, 2017 at 6:05
4

Use a factory. That's the best practice for these cases.

The problem is that is tricky to define Typescript types for the factory pattern, especially with inheritance.

Let's see how to properly implement it in Typescript.

No inheritance

If you don't need class inheritance, the pattern is this:

class Person {
  constructor(public name: string) {}

  static async Create(name: string): Promise<Person> {
    const instance = new Person(name);

    /** Your async code here! **/

    return instance;
  }
}

const person = await Person.Create('John');

Class inheritance

If you need to extend the class, you will run into a problem. The Create method always returns the base class.

In Typescript, you can fix this with Generic Classes.

type PersonConstructor<T = {}> = new (...args: any[]) => T;

class Person {
  constructor(public name: string) {}

  static async Create<T extends Person>(
    this: PersonConstructor<T>,
    name: string,
    ...args: any[]
  ): Promise<T> {
    const instance = new this(name, ...args);

    /** Your async code here! **/

    return instance;
  }
}
class MyPerson extends Person {
  constructor(name: string, public lastName: string) {
    super(name);
  }
}

const myPerson = await MyPerson.Create('John', 'Snow');

Extending the factory

You can extend the Create method too.

class MyPerson extends Person {
  constructor(name: string, public lastName: string) {
    super(name);
  }

  static async Create<T extends Person>(
    this: PersonConstructor<T>,
    name: string,
    lastName: string,
    ...args: any[]
  ): Promise<T> {
    const instance = await super.Create(name, lastName, ...args);

    /** Your async code here! **/

    return instance as T;
  }
}

const myPerson = await MyPerson.Create('John', 'Snow');

Less verbose alternative

We can reduce the code verbosity by leveraging the async code to a non-static method, which won't require a Generic Class definition when extending the Create method.

type PersonConstructor<T = {}> = new (...args: any[]) => T;

class Person {
  constructor(public name: string) {}

  protected async init(): Promise<void> {
    /** Your async code here! **/
    // this.name = await ...
  }

  static async Create<T extends Person>(
    this: PersonConstructor<T>,
    name: string,
    ...args: any[]
  ): Promise<T> {
    const instance = new this(name, ...args);

    await instance.init();

    return instance;
  }
}
class MyPerson extends Person {
  constructor(name: string, public lastName: string) {
    super(name);
  }

  override async init(): Promise<void> {
    await super.init();

    /** Your async code here! **/
    // this.lastName = await ...
  }
}

const myPerson = await MyPerson.Create('John', 'Snow');

Aren't static methods bad practice?

Yes, with one exception: factories.

Why not return a promise in the constructor?

You can do that, but many will consider your code a bad pattern, because a constructor:

  • Should always return the class type (Promise<Person> is not Person);
  • Should never run async code;
3
  • 1
    seems like a clean approach, tho some comments above had issues with factory pattern
    – dcsan
    Dec 4, 2022 at 8:13
  • 1
    Good point. There are many factory pattern answers here. They all share the same pros/cons. I added one more because it is tricky to define Typescript types for the factory pattern, especially with inheritance. Even though this is a Typescript question, no factory-pattern answers here fully implement the type definitions. Either they are pure vanilla JS, or they lack the type definition for the factory, or when they do, they don't deal with inheritance. Dec 4, 2022 at 17:28
  • 1
    I rewrote the introduction to focus on why this answer is different. It's all about the type definition of the factory pattern on TS. Dec 4, 2022 at 17:55
2

You may elect to leave the await out of the equation altogether. You can call it from the constructor if you need to. The caveat being that you need to deal with any return values in the setup/initialise function, not in the constructor.

this works for me, using angular 1.6.3.

import { module } from "angular";
import * as R from "ramda";
import cs = require("./checkListService");

export class CheckListController {

    static $inject = ["$log", "$location", "ICheckListService"];
    checkListId: string;

    constructor(
        public $log: ng.ILogService,
        public $loc: ng.ILocationService,
        public checkListService: cs.ICheckListService) {
        this.initialise();
    }

    /**
     * initialise the controller component.
     */
    async initialise() {
        try {
            var list = await this.checkListService.loadCheckLists();
            this.checkListId = R.head(list).id.toString();
            this.$log.info(`set check list id to ${this.checkListId}`);
         } catch (error) {
            // deal with problems here.
         }
    }
}

module("app").controller("checkListController", CheckListController)
5
  • 6
    This creates a race condition, because it's just like calling a function that returns a promise. The function will return before the promise is completed. In this case, this.initialise() is not a blocking call in the constructor. The initialise and constructor functions return before list gets its awaited value.
    – rob3c
    Dec 21, 2017 at 19:41
  • @rob3c, if you look at the generated state machine you will notice that the constructor will indeed return before initialise returns: however the initialise function will not return before the list is loaded. the await in initialise is there to achieve precisely that.
    – Jim
    Dec 22, 2017 at 4:02
  • We're saying the same thing. The state machine you refer to is exactly the code generated behind the scenes that allows the single-threaded javascript to return from both initialise and the constructor to continue execution before the second part of initialise is resumed at the await line once it completes. That doesn't eliminate the race condition - it only obfuscates it.
    – rob3c
    Dec 22, 2017 at 6:01
  • ok, I don't feel it matters much, I don't need the return state of either function. The pattern is better achieved by dropping async and await, and using native chained promises. I definitely don't think creating a whole factory pattern in addition to all the other generated code is of any great value.
    – Jim
    Dec 22, 2017 at 6:05
  • 1
    @Jim that's incorrect. The await inside the async initialize isn't awaited if initialize itself isn't awaited. Using promises wouldn't change anything - async/await are just syntax sugar over common promises. Mar 31, 2018 at 7:48
2

Use a setup async method that returns the instance

I had a similar problem in the following case: how to instanciate a 'Foo' class either with an instance of a 'FooSession' class or with a 'fooSessionParams' object, knowing that creating a fooSession from a fooSessionParams object is an async function? I wanted to instanciate either by doing:

let foo = new Foo(fooSession);

or

let foo = await new Foo(fooSessionParams);

and did'nt want a factory because the two usages would have been too different. But as we know, we can not return a promise from a constructor (and the return signature is different). I solved it this way:

class Foo {
    private fooSession: FooSession;

    constructor(fooSession?: FooSession) {
        if (fooSession) {
            this.fooSession = fooSession;
        }
    }

    async setup(fooSessionParams: FooSessionParams): Promise<Foo> {
        this.fooSession = await getAFooSession(fooSessionParams);
        return this;
    }
}

The interesting part is where the setup async method returns the instance itself. Then if I have a 'FooSession' instance I can use it this way:

let foo = new Foo(fooSession);

And if I have no 'FooSession' instance I can setup 'foo' in one of these ways:

let foo = await new Foo().setup(fooSessionParams);

(witch is my prefered way because it is close to what I wanted first) or

let foo = new Foo();
await foo.setup(fooSessionParams);

As an alternative I could also add the static method:

    static async getASession(fooSessionParams: FooSessionParams): FooSession {
        let fooSession: FooSession = await getAFooSession(fooSessionParams);
        return fooSession;
    }

and instanciate this way:

let foo = new Foo(await Foo.getASession(fooSessionParams));

It is mainly a question of style…

2
  • I think it's rather complicated on my opinion. If you develop a module for other developers then you will have to write comprehensive docs for them to instantiate the class correctly. I prefer design with a private constructor and only one static async builder method. This static method could also have optional params as well. Aug 16, 2020 at 4:07
  • seems nice and simple esp the oneliner w setup() inline.
    – dcsan
    Dec 4, 2022 at 8:11
0

Create holder for promise status:

class MyClass {
    constructor(){
        this.#fetchResolved = this.fetch()
    }
    #fetchResolved: Promise<void>;
    fetch = async (): Promise<void> => {
        return new Promise(resolve => resolve()) // save data to class property or simply add it by resolve() to #fetchResolved reference
    }
    isConstructorDone = async (): boolean => {
        await this.#fetchResolved;
        return true; // or any other data depending on constructor finish the job
    }
}

To use:

const data = new MyClass();
const field = await data.isConstructorDone();
0

Building on @Paul Flame's answer... Setting class properties/fields to promises in the constructor rather than the resolved objects is a great way to go from a memory usage standpoint.

The question I was initially wondering is whether awaiting the same promise multiple times would create deep copies of new objects, or a return a reference to the originally resolved object. For a database class, this would make a huge difference.

The answer: Awaiting the same promise multiple times returns a reference to the originally resolved object.

Note the following TypeScript example:

type Message = {
  message: string;
}

async function timeout( delay: number ): Promise<Message> {
  return new Promise( resolve => {
    const data = { message: `a delay of ${ delay } has elapsed` };

    setTimeout( () => resolve( data ), delay );
  } );
}

class TimeyMcTimeclass {
  #messagePromise: Promise<Message>;

  constructor( delay: number ) {
    this.#messagePromise = timeout( delay );
    
    console.log( 'constructor' )
  }

  async doOneThing(): Promise<Message> {
    const result = await this.#messagePromise;

    console.log( 'one message', result );
    
    return result;
  }

  async doAnotherThing(): Promise<Message> {
    const result = await this.#messagePromise;

    console.log( 'another message', result );

    return result;
  }

};

( async () => {

  const timey = new TimeyMcTimeclass( 2000 );

  const oneThing = await timey.doOneThing();
  const anotherThing = await timey.doAnotherThing();
  
  console.log( 'are these objects pointing to the same reference?', Object.is( oneThing, anotherThing ) )

} )();

Run it in TS Playground here

-1

Or you can just stick to the true ASYNC model and not overcomplicate the setup. 9 out of 10 times this comes down to asynchronous versus synchronous design. For example I have a React component that needed this very same thing were I was initializing the state variables in a promise callback in the constructor. Turns out that all I needed to do to get around the null data exception was just setup an empty state object then set it in the async callback. For example here's a Firebase read with a returned promise and callback:

        this._firebaseService = new FirebaseService();
        this.state = {data: [], latestAuthor: '', latestComment: ''};

        this._firebaseService.read("/comments")
        .then((data) => {
            const dataObj = data.val();
            const fetchedComments = dataObj.map((e: any) => {
                return {author: e.author, text: e.text}
            });

            this.state = {data: fetchedComments, latestAuthor: '', latestComment: ''};

        });

By taking this approach my code maintains it's AJAX behavior without compromising the component with a null exception because the state is setup with defaults (empty object and empty strings) prior to the callback. The user may see an empty list for a second but then it's quickly populated. Better yet would be to apply a spinner while the data loads up. Oftentimes I hear of individuals suggesting overly complicated work arounds as is the case in this post but the original flow should be re-examined.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.