classAppextendsReact.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 */}<buttononClick={this.onClick.bind(this)}>Count Up!!</button></div>)}}
and after using React Hooks
importReact,{useState}from'react';functionExample(){// Declare a new state variable, which we'll call "count"const[count,setCount]=useState(0);return(<div><p>You clicked {count} times</p><buttononClick={()=>setCount(count+1)}>
Click me
</button></div>);}
The lexically bound
this
context is probably the most important quality of thicc arrow functions.Agreed. It helps with some of the strange and unexpected behavior of
this
.Being a react developer, I mostly use arrow functions to bind this context
I tend to use hooks in new code and avoid
this
altogether.Can you please provide an example of this (using hooks not
this
).why would you need
this
when you don't use classes.Sorry I'm just confused what you mean by hooks. Hoping you might paste in an example?
Classical React example of Counter
and after using React Hooks
know more about react hooks.
You are not binding the context by using an arrow function, it doesn't work that way.
More info here: github.com/getify/You-Dont-Know-JS...