That time I learn how to use bind()

Efrain Tlapale
Jul 25, 2017 · 3 min read

When i started to learn React one of the things that I always find tricky was the use of bind to attach functions to React elements.

For example, something like this (extracted from the React Docs):

(As you may noticed, I don’t like semicolons)

I read the Mozilla docs referring to bind() (https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/bind) and some fragments of JS books, but honestly I didn't understood anything, and I didn’t want to use something i dodn’t understand, so, my solution was to look for alternatives to bind()

I found that I could use property initializers in ES6 classes, or to pass an arrow function that executed the “target” function, acting like a bridge between the component and the class:

At this moment probably you’re saying: “wait a minute, you didn’t learn how to use bind(), you simply avoid it” and that’s true, I opted to use property initializers and forget about bind().

But one day I was building a scholar project, and I wanted to reuse a form that I use to create bills.

The bill form had its own state, and it was kind of “complex”, one part of the state was an array of concepts that the user could modify (add, delete, modify concepts), so it doesn’t matter if the form was used to create a new bill or to edit an existing one, that behavior was always the same.

Mi first instinct was only to define a functions as a prop for the form, and executed when the submit button was clicked.

The main problem was that i needed to restart the state once the bill was created, so that the array of concepts became empty, the selected date became the default and stuff like that.

I know there are a lot of alternatives to make this work, but I choose probably the worst, I ended up defining the prop in the bill form component, but I needed that the function passed could handle its state(yeah, I know, it sounds horrible, but it helped me to understand bind()).

So, my solution was kind of dirty . When I was thinking of how to solve it I remembered the “theory” of bind() and how it could change the reference to this, and I read the Mozilla docs again and something just made click.

I figured out that I could bind the function passed as a prop to the bill form component so that the this in the prop referred to the this of the billform instead of its original component.

I ended up with something like this:

This way I only needed to import the form in the parent component:

We can observe that the this in the saveBill function is going to be binded to the BillForm component.

Something to note is that the save bill function need to be written with that syntax, because arrow functions cannot be “rebinded” to another context, they always use its original one.

That’s all for this post, I never found a “real” use for bind until I needed to reuse that bill form, anyway I think it is not a good option, and it only was a way to learn how bind() works.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade