ReactJS: Function bindings in your React Component

Implementing Function.prototype.bind() for cleaner code in your component

Function.prototype.bind() is very useful when you develop your react application with a function that is not part of the scope on your component.

EXAMPLE:

Assuming that function counter() is on separate file called functions.js. And HomeComponent class is also on a separate file called home-component.js

If you wan’t to share your functions on multiple components. I highly advice that you should put it on a different file and just import it if used.

VISUALIZATION:

BENEFIT:

The benefit of separating your functions in your component is you can cluster it on a script file which is more relevant to place and your functions will be reusable to different components.

binding the function within the component is when you wan’t to use a property inside the component and in order to used any properties inside the scope of a component. binding the function in the constructor is necessary.

HOW TO USE:

Since the function counter() is bind on the constructor() method. The counter() function can use any property of the class App component using this.

NOTE: this

is the entity of the instantiated class. which means this can call any local property within the class. {this} won’t work on a static property of the class.

ANOTHER WAY OF USING IT?

Of course! there is a technique where you can use function bindings to execute the function.

FIRST LETS CREATE ANOTHER COMPONENT!

The code snippet above is a component that accepts a function onClick() that accepts a value to be added, a title, and an initialScore

if the ButtonComponent is clicked! it will call the onClick props with a parameter value adding the initialScore + 1;

in order to get the incremented score. we need to refactor our App component.

this.setState({ count: value }) is still under the App component. WHY? because when we pass the this.counter as a props to the ButtonComponent. We bind the counter() function on the constructor method of the App component. So this.setState({ }) is still referring to the entity of the App component. It means the this.state.counter value in the App Component will be updated even if the one who run the function is the ButtonComponent

ANOTHER EXAMPLE:

In this scenario the ChangeComponent adds a parameter of the props function onClick.

If we pass the function setName from the App component to the ChangeComponent. We should bind it first to update the state.name of the App component.

CONCLUSION:

binding function from another file to share its functionality is better way to share the function. Your component is more compact and clean. Although you can still add a function under your component but if you wan’t to be more effective on your development having multiple team members on your project.

This is a factor also if you wan’t your function to be testable as a single unit.