What is ‘this’ in React?

And why do we use it all the time?

Photo by Terrah Holly on Unsplash

If you are jumping into React, you are probably seeing a lot of ‘this’ lately. Let’s dive into what the ‘this’ keyword means in JavaScript and React.

The ‘this’ keyword

The ‘this’ keyword typically references a JavaScript element depending on the scope or context of its use. Let me give you a few examples for that to set in.

Global ‘this’ scope

The most straight forward scope is the global scope in your browser. If you open the console in a web browser and run the following…

this

The browser will return the global Window object…

Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, …}

Any command that you would run on the Window object you can run with ‘this’ in the global scope.

this.alert(‘Hey!’)
//Is the same as
Window.alert(‘Hey!’)
this.location = ‘https://medium.com'
//Is the same as
Window.location = ‘https://medium.com'

Function ‘this’ scope

This is where things get a little fuzzy and you better have your lexical scope wits about you.

The value of ‘this’ in JavaScript functions is determined by how a function is called. Methods like call, apply, and bind explicitly set the value of ‘this’ in a function, however if ‘this’ isn’t explicitly set, then ‘this’ will default to the global context.

const thisFunction = function () {
 return this;
}
//Calling thisFunction() in the browser will return the window object

When using strict mode, ‘this’ in a function will refer to it’s explicit value, and if ‘this’ hasn’t been explicitly set then ‘this’ will be undefined.

const strictFunction = function() {
 ‘use strict’;
 return this;
}
//Calling strictFunction() in the browser will return undefined since this is not explicitly set with call, apply, or bind

Explicitly setting ‘this’ with call, apply, bind, and the arrow function

So how do we explicitly set ‘this’ on a function? The call, apply, and bind methods do this for us.

The call method on a function accepts an object that ‘this’ will refer to and any other parameters defined in the function. The apply method accepts the object ‘this’ will refer to and an array that contains the parameters reference when defining the function.

const object = {
 a: 5,
 b: 7
}
const thisFunction = function(c, d) {
 return this.a + this.b + c + d;
}
thisFunction.call(object, 12, 4);
//will return 28
thisFunction.apply(object, [3, 6]);
//will return 21

The bind method differs from call and apply in that the bind method attaches an object to a function so that every time the function is called it refers to the bound object.

const object = {a: 2, b:3, c:6};
const thisFunction = function() {
 return this.a + this.b + this.c;
}
const bindFunction = thisFunction.bind(object);
bindFunction(); //will return 11

Object context

When using ‘this’ in an object, this will refer to the object itself. This makes it easy to refer to an object’s values in the object’s methods.

const object = {
 a: 2,
 b: 3,
 thisFunction: function(){
 return this.a + this.b;
 }
};
object.thisFunction() //returns 5

So what does this mean for React

In React component classes we define methods that will refer to class attributes such as props and state. However, for our methods to have access to this.state and this.props we need to bind the React component ‘this’ context to those methods.

import React, { Component } from ‘react’;
class App extends Component {
  constructor(props) {
    super(props);
    this.clickFunction = this.clickFunction.bind(this);
  }
  clickFunction() {
    console.log(this.props.value);
  }
  render() {
    return(
      <div onClick={this.clickFunction}>Click Me!</div>
    );
  }
}

Binding ‘this’ to the class methods enables us to access props and state for the component with this.props and this.state.

The Arrow Function

As you noticed, binding ‘this’ to your class methods can create a lot of boiler plate. The arrow function introduced in ES6 is a function with the current ‘this’ context already bound to the function. Because of this nice functionality we can use public class fields to automatically bind this to our methods.

const myFunction = () => {
 return this.props.a + this.props.b;
}
//The previous stated myFunction is the same as...
const myFunction = function() {
  return this.props.a + this.props.b;
}.bind(this);

The combination of the arrow function and public class fields proved a clean, declarative way to define our React components.

In my next post we’ll look at the difference between the .bind(this) boilerplate and public class fields.

Thanks for reading!

If you’d like to hear more then subscribe to the weekly newsletter and connect with me here.