useEffect() in React JS

React JS

Today we will discuss about useEffect() in React JS. In previous article we have discussed about useState() in react.

Basically useEffect is also part of the hooks in the react. React introduced hooks in 16.8 version. Using hooks we can use react features in function component i.e. without using class component we can use react feature.

If we want to use react life cycle method (componentDidMount , componentDidUpadte and componentWillUnmount) in functional component then we can use useEffect hooks in react. UseEffect is the alternate way to use componentDidMount and componentDidUpdate life cycle method in functional component.

ComponentDidMount & ComponentDidUpdate

Here we will discuss about componentDidMount and componentDidUpdate in briefly.

ComponentDidMount method will invoke after the rendered component. In the ComponentDidMount method we can set the state because it is called after render method.

If there is anything update in the component then componentDidUpdate method is called.

If component received new props or changed internal state then componentDidUpdate method run automatically.

For example –

import React, { Component } from 'react'
class UseComponentDidMount extends Component {
    state = {
        tutorial: 'JavaScript Tutorial',
    }

    componentDidMount() {
        console.log('Render componentDidMount')
    }

    componentDidUpdate() {
        console.log('Render componentDidUpdate')
    }

    handleOnClick = () => {
        this.setState({ tutorial: 'React JS Tutorial' })
    }

    render() {
        const { tutorial } = this.state
        return (
            <div>
                <p>Tutorial is <b>{tutorial}</b></p>
                <button onClick={this.handleOnClick}>
                    Click me
                </button>
            </div>
        )
    }
}
export default UseComponentDidMount

Output –

componentDidMount in React JS

So in the above code example we have used both method i.e. componentDidMount and componentDidUpdate.

When we called this component then render method will be call firstly. After render component, componentdidMount will run, as per above image.

When we click on ‘Click me’ button then its call the handleOnClick function. In this function we have updated the state. If state has updated then componentDidUpdate method will run, as per below image.

Output –

ComponentDidUpdate in React JS

If we want to perform same thing in functional component then we can use useEffect() in react js.
For example –

useEffect

import React, { useState, useEffect } from "react";
const UseEffectFunction = () => {
    const [ tutorial, setTutorial ] = useState('JavaScript Tutorial');

    const handleOnClick = () => {
        setTutorial('React JS Tutorial')
    }

    useEffect( () => {
        console.log('Render in useEffect.')
    })
 
    return ( 
        <div>
            <p>Tutorial is <b>{tutorial}</b></p>
            <button onClick={handleOnClick}>
                Click me
             </button>
         </div>
     )
 }
export default UseEffectFunction

Output –

useEffect in React JS

So in the above code example we have used useEffect. When we call this component then render useeffect method.

When we click on ‘Click me’ button then its call the handleOnClick function. In this function we have updated the state. If state has updated then useEffect method is called, as per below image.

Output –

useEffect in React JS

Condition in useEffect

Suppose there are multiple state in the component and we want to useeffect execute base on the specific condition then we can pass the condition as a second parameter in useeffect function like as below example.

import React, { useState, useEffect } from "react";
 
const UseEffectFunction = () => {
    const [tutorial, setTutorial] = useState('JavaScript Tutorial');
    const [name, setName] = useState('Web Study Point');

    const handleTutorial = () => {
        setTutorial('React JS Tutorial')
    }
    const handleName = () => {
        setName('Web Study Tutorial')
    }

    useEffect(() => {
        console.log('Render in useEffect.')
    },[tutorial]) // pass tutorial as a condition

    return (
        <div>
            <p>Name is <b>{name}</b></p>
            <p>Tutorial is <b>{tutorial}</b></p>
            <button onClick={handleName}>Change Name</button>&nbsp;
            <button onClick={handleTutorial}>Change Tutorial</button>
        </div>
    )
}
export default UseEffectFunction

In the above code example we have seen, there are two state (name & tutorial) and passed the tutorial as a second parameter in useEffect function. So useEffect will execute when tutorial will change otherwise useEffect will not execute. If we change the name state then useEffect will not execute because we have passed the tutorial state in useEffect function.

So in this article we have discussed about useEffect in react js. Using this tutorial anyone can easily understand useEffect() in react js.

If you want to improve this tutorial or find anything wrong/incorrect then please leave a message using below comment box.

Leave a Reply

Your email address will not be published. Required fields are marked *

fifteen + 4 =