Name: How to use 'effect' hook easy way
Rating: 4.9 (2007 reviews)
Author: elukuro

How to use 'effect' hook easy way

Heru Hartanto - Apr 9 '21 -

- Dev Community

Hooks are additional in react 16.8, Hooks let us to use state and other React features without writing class wooow 😎

In previous post I was explained about useState, in this post I will explain about useEffect.
In sort useEffect let us perform side effect after we render component, let see example below.

Example using class component

class PlusOne extends React.Component{
    // prepare and declaring state 
    constructor(props);
    super(props);
    this.state = {
        count:0
    }
    componentDidMount() {
        document.title = `hit ${this.state.count} times`;
    }
    componentDidUpdate() {
        document.title = `hit ${this.state.count} times`;
    }
    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

gently reminder that hooks doesn't work with class component

   // import useState and useEffect from react lib
   import React, { useState,useEffect } from 'react';
   function PlusOne() {
       const[count,setCount]= useState(0); /* first count variable value set to 0 */
       useEffect(()=>{
           /*
            use effect let us express side effect after component rendered.   
           */
           document.title = `hit ${count} times`; 
       },[count]) // only re-run effect if count changes
       return(
           <div>
            <p> you hit {count} </p>
            <button onClick={()=> setCount(count+1)}>
                +
            </button>
           </div>
       )
   }