Discussion on: JavaScript 101: Arrow Functions

View post

Replies for: Being a react developer, I mostly use arrow functions to bind this context

Saurabh Sharma • Jun 22 '19

I tend to use hooks in new code and avoid this altogether.

daveclarke • Jun 24 '19

Can you please provide an example of this (using hooks not this).

Saurabh Sharma • Jun 25 '19

why would you need this when you don't use classes.

daveclarke • Jun 25 '19

Sorry I'm just confused what you mean by hooks. Hoping you might paste in an example?

Saurabh Sharma • Jun 25 '19

Classical React example of Counter

class App extends React.Component {
    constructor(props) {
        this.state = {
            count: 0
        }
    }

    onClick(e) {
        this.setState({
            count: this.state.count + 1
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                {/* this is needed here  */} 
                <button onClick={this.onClick.bind(this)}>Count Up!!</button>
            </div>
        )
    }
}

and after using React Hooks

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

know more about react hooks.