React state hook , easy way

#javascript #react

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>
       )
   }