this & Arrow Functions

Foundational

this is a shape shifter — it becomes whatever called it. Arrow functions freeze its form forever. Understanding this is key to reading React code confidently.

💡 Arrow functions and closures replaced the this binding nightmare. Understanding both is why modern React code just works.

What is this?

this is a shape shifter — it becomes whatever called it. Global, function, or object context all change its identity.

Binding Rules

Implicit, explicit (call/apply/bind), and new binding. Learn the priority order that decides what this becomes.

Arrow Functions

Arrow functions freeze the shape forever — they capture this from where they're defined, not where they're called.

this in React

The class component binding pain, why hooks solved it, and how arrow functions made event handlers simple.

These are the patterns that trip up developers most often. Switch between Wrong and Fixed to compare the code side by side.

Losing this when passing methods as callbacks

Extracting a method from an object strips away its this binding

Don't do this

timer.js

class Timer {
  constructor() {
    this.seconds = 0;
  }
  tick() {
    this.seconds++;              // 'this' is undefined here!
    console.log(this.seconds);
  }
  start() {
    setInterval(this.tick, 1000); // passes reference, loses this
  }
}

In JavaScript, this is determined by how a function is called, not where it is defined. When you pass this.tick as a callback, it loses its this context — the method is called as a plain function. Arrow function class fields permanently capture this from the class instance.

Arrow functions as object methods

Using arrow syntax for methods that need dynamic this binding

Don't do this

person.js

const person = {
  name: "Alice",
  // Arrow function captures outer this (window/undefined)
  greet: () => {
    console.log(`Hi, I'm ${this.name}`); // this is NOT person!
  },
};
person.greet(); // "Hi, I'm undefined"

Arrow functions don't have their own this — they permanently capture it from the enclosing lexical scope. When used as object methods, this refers to the outer scope (often window or undefined), not the object. Use regular function syntax for object methods that need dynamic this.

Forgetting to bind in React class components

Event handlers in class components lose this without explicit binding

Don't do this

toggle.jsx

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOn: false };
    // Forgot to bind handleClick!
  }
  handleClick() {
    // TypeError: Cannot read property 'setState' of undefined
    this.setState({ isOn: !this.state.isOn });
  }
  render() {
    return <button onClick={this.handleClick}>Toggle</button>;
  }
}

In React class components, event handler methods are not automatically bound to the class instance. When JSX passes the method as onClick={this.handleClick}, the reference loses its this binding. Use arrow function class fields, or just use function components where this problem doesn't exist.

class Timer { constructor() { this.seconds = 0; } tick() { this.seconds++; // 'this' is undefined here! console.log(this.seconds); } start() { setInterval(this.tick, 1000); // passes reference, loses this } }

class Toggle extends React.Component { constructor(props) { super(props); this.state = { isOn: false }; // Forgot to bind handleClick! } handleClick() { // TypeError: Cannot read property 'setState' of undefined this.setState({ isOn: !this.state.isOn }); } render() { return <button onClick={this.handleClick}>Toggle</button>; } }

this & Arrow Functions

Common Mistakes

this & Arrow Functions

Common Mistakes