React Hooks Part 2

React useEffect

The useEffect Hook allows you to perform side effects in your components.Some examples of side effects are: fetching data, directly updating the DOM, and timers.useEffect accepts two arguments. The second argument is optional.

useEffect(function, dependency)

Type

• No dependency
• An empty array
• Props or state values

Example

An empty array
Runs the effect only once when the component is first loaded (mounted).

import {useState, useEffect} from 'react'


 function Clock(){
    const[time, setTime]=useState(new Date())
    useEffect(function(){
        setInterval(function(){
            setTime(new Date());
        },1000)
    },[])

    return(
        <div>
            <h1>Clock</h1>
      <p>{time.toLocaleTimeString()}</p>
        </div>

    )
 }

 export default Clock


Output:

Clock
11:07:30

Props or state values

Runs the effect when the specified dependency value changes.

import { useState } from 'react'
import {useEffect} from 'react'

function App() {

const [count, setCount] = useState(0);
useEffect(function(){
  console.log("Count change:", count)
}, [count]);
function increase() {
  setCount(count+1);
}
function decrease() {
  if(count>0){
    setCount(count - 1);
  }

}
  return (

    <div>
      <h1>Counter</h1>
      <p>Count: {count}</p>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
      <button onClick={() => setCount(0)}>Reset</button>

    </div>


  )
}

export default App

Output:

Count change: 0
Count change: 0
Count change: 1
Count change: 2
Count change: 3
Count change: 4
Count change: 5
Count change: 6
Count change: 7
Count change: 8

No dependency

Runs the effect after every render of the component.

import { useState } from 'react'
import {useEffect} from 'react'

function App() {

const [count, setCount] = useState(0);
useEffect(function(){
  console.log("Count change:", count)
});
function increase() {
  setCount(count+1);
}
function decrease() {
  if(count>0){
    setCount(count - 1);
  }

}
  return (

    <div>
      <h1>Counter</h1>
      <p>Count: {count}</p>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
      <button onClick={() => setCount(0)}>Reset</button>

    </div>


  )
}

export default App