DEV Community

loading...

How to use 'effect' hook easy way

elukuro profile image Heru Hartanto Updated on ・1 min read

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>
        )
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
       )
   }
Enter fullscreen mode Exit fullscreen mode

Discussion (3)

Collapse
lyqht profile image
Estee Tey

I think it may be better if you include your explanation as markdown text outside of the code blocks, rather than comments in the code itself. I would love to see more explanation and your perspective of why you prefer writing hooks over class components!

Collapse
zakiazfar profile image
zakiAzfar

Please add syntax highlighting, it will be easy to read.

do it by adding js(or any other programming language name) after backticks(```)


```js
let x = 100
```
Produces

let x = 100
Enter fullscreen mode Exit fullscreen mode

```
let x = 100
```
Produces

let x = 100
Enter fullscreen mode Exit fullscreen mode

Notice js after ``` or backticks you prefer

Collapse
elukuro profile image
Heru Hartanto Author

you're my hero 😊

Forem Open with the Forem app