Why don't we bind 'this' to the render method?

Tell us what’s happening:
I don’t have a problem with the challenge itself, but I don’t really understand what’s going on. I understand that we bind ‘this’ to the ‘handleClick’ method so that it has access to ‘this’, but then why don’t we bind ‘this’ to the ‘render’ method? If handleClick doesn’t work without binding ‘this’, then why does render?

Challenge: React - Bind ‘this’ to a Class Method

Link to the challenge:

Welcome to the community!

reactjs - bind(this) in ReactComponent.render() method - Stack Overflow

  1. Never bind this in the render method. Binding this in the render method will cause React to create a new function every time your Component is rerendered. This is why we most commonly bind in the constructor.

Thanks for the reply,

I don’t think I’ve described my problem well enough.
I am not asking why we don’t bind this IN the render method, I’m asking why we don’t bind this TO the render method i.e. why don’t we do the following:

this.render = this.render.bind(this)

render is a method, just like handleClick, so I don’t understand why we only bind this to handleClick

Sorry about that. Maybe somebody else can provide a different response.

I think of them as the same result being the reason. But, I do not know even half of it. lol

Keep up your good progress!

Because when handleClick is finally executed when you click on the button it won’t have a this because it is not being called on an object of the class but rather as a stand alone function. So unless you bind it to the this of the class then it won’t have one.

You can see this for yourself by adding console.log(this); as the first line of handleClick(). When you bind this to the method and click the button then you will see the this object for the class in the console pane. But if you comment out the line in the constructor that binds this to the method then you will see undefined in the console pane when you click the button. (You’ll also see a TypeError, but you can ignore that.)

The render method on the other hand is never called as a stand alone function. It is always called on an object of the class, so you don’t need to bind it to this. You can if you want to, but it won’t gain you anything.

Update: Ahh, I didn’t quite read your question correctly. I see that you already understood the stuff in my first two paragraphs and you only needed my explanation in the third paragraph. My bad.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.