Do I need makeObservable when initializing properties using observable

[yordis]

Hey there, I have the following code where I use observable to initialize default values.

Do I still need to call makeObservable for those fields as well?

type ClearbitLogo = {}

export default class Clearbit {
  suggestions = observable<ClearbitLogo>([])

  constructor() {
    makeObservable(this, {
      suggestions: observable, // Do I need this?
      setSuggestions: action,
    })
  }
}

[urugator]

Depends, observable<ClearbitLogo>([]) just returns an observable array, so you can observe changes of that array (like suggestions.splice(1)), but you can't observe assigments to the suggestions property (like this.suggestions = []) - that's what makeObservable is about.
But it works the other way around: makeObservable(this, { suggestions: observable }) - in addition to making suggestions property observable automatically converts the assigned value to observable - unless you would use observable.ref instead of observable.

[yordis]

I use observable<ClearbitLogo>([]) because already added the right typespec, which is the primary reason over suggestions = [].

I did not understand if I needed to call makeObservable in that particular field, my apologies.

[mweststrate]

@yordis, as a rule of thumb, either mark it as readonly (assuming TypeScript) to guarantee you won't reassign the field later, or process it in makeObservable, to make sure that any new values assigned will be marked observable as well.

[yordis]

That is an interesting topic. Because I am moving to TypeScript, I discovered .replace/1. I see that we are doing the following assignment:

type ClearbitLogo = {}

export default class Clearbit {
  suggestions = observable<ClearbitLogo>([])

  constructor() {
    makeObservable(this, {
      suggestions: observable, // Do I need this?
      setSuggestions: action,
    })
  }

  setSuggestions(value) {
    if (value) {
      this.suggestions = value // this is what is in prod right now
      // this.suggestions.replace([])
    } else {
      this.suggestions = [] // this is what is in prod right now
      // this.suggestions.replace([])
    }
  }
}

Is that fundamentally incorrect here? Or is that prevented by the makeObserable?

Thinking out loud probably that makeObserable is doing Proxies behind the scenes, it is probably OK. Either way, good info to have around here.

[mweststrate]

both is perfectly fine. If you don't do the makeObservable you shouldn't do the reassignment as well, and use replace indeed.