Use of closures in React.md

Use of closures in React

How to make use of closures in React when handling events, to get some performance gains

Example 1

When we don't need the event, neither any parameter to be passed.

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  example1 = () => {
    // Here we don't need the event, neither any parameter to be passed
    console.log("Example 1");
    // Do your thing here
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.example1}>Example 1</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Example 2

When we don't need the event, but we need a parameter to be passed.

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  example2 = parameter => () => {
    // Here we don't need the event, but we need the parameter to be passed
    console.log("Example 2", parameter);
    // Do your thing here
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.example2("parameter")}>Example 2</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Example 3

When we need the event, but we don't need the parameter to be passed.

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  example3 = event => {
    // Here we need the event, but we don't need the parameter to be passed
    console.log("Example 3", event.target);
    // Do your thing here
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.example3}>Example 3</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Example 4

When we need the event, and also the parameter to be passed.

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  example4 = parameter => event => {
    // Here we need the event, and we also need the parameter to be passed
    console.log("Example 4", parameter, event.target);
    // Do your thing here
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.example4("parameter")}>Example 4</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Example