Hooks are additional in react 16.8, Hooks let us use use state and other React features without writing class wooow 😎
The first "hook" that we will learn is useState, and the other "hook" is useEffect.
useState is similar to declaring state at class component include the setState functionality in one wrap.
Example using class component
class PlusOne extends React.Component{ // prepare and declaring state constructor(props); super(props); this.state = { count:0 } render() { return( <div> <p>you hit {this.state.count}</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> + </button> </div> ) } } Example function components using hooks
bear in mind that hooks doesn't work with class component
// import useState from react lib import React, { useState } from 'react'; function PlusOne() { const[count,setCount]= useState(0); /* first count variable value set to 0 */ /* those above line actually is an `array destructuring` they are consist of two variable count is current value setCount is function that let us update it */ return( <div> <p> you hit {count} </p> <button onClick={()=> setCount(count+1)}> + </button> </div> ) } Conclusion
- State hook is similar to declaring state
- React hook can't use in class components
- React hook make our components looks more clean
Top comments (1)
It is helpful :)