Js this and callbacks - React 18: Intermediate Topics

[Evan413]

Hi All,
In video 20- Creating a Reusable API Client, Mosh goes over the following line in useTodos.ts when there is the white screen error

queryFn: apiClient.getAll,

He says there is an issue with this (from the getAll method in apiClient.ts), that this loses it’s context and becomes undefined, like it is a stand-alone function, not a function that is part of an object. Fixes are to use bind() or to convert the getAll regular function to an arrow function.

I am wondering why there is this issue with this in the first place, because it is a callback?

Any links or explanations of why this is the case are appreciated. thanks

[Evan413]

found an explanation here, so class methods as callbacks are not bound by default

''this'' in stand alone function

When the render function is called, it has the correct this. So when it calls this.getBadgeColor() and this.formatCount(), those functions also have the correct this and everything works as expected. But notice that the render function isn’t calling this.handleIncrement, if it were you would see parentheses like this.handleIncrement(). Rather, it’s passing the handleIncrement function over to the onClick event to be called later. When you pass functions around, the this doesn’t automatically go …