React Hooks - useEffect

             Initially react supported Class components and function components were considered as state-less component. Later, in React 16.8 version, hooks were introduced which allows functional components to have access to state and other React features.

A React Hook allows us to access React features such as state and lifecycle methods. There are multiple hooks introduced such as: 

• useState()
• useEffect()
• useContext()
• useRef()        
• useMemo()

 and many more...

To understand useState() better: refer to our blog on state and props in React

useEffect() hook: 

                 In class components you have seen multiple lifecycle phases and their methods such as componentDidMount(), componentWillMount(), componentWillUnmount() etc. In functional components, to handle all these lifecycle phases useEffect() is introduced. 

Note: useEffect() can handle all lifecycle phases.

                useEffect() accepts two arguments:

                Syntax:

                            useEffect(function, dependency)

                Let's understand this hook by creating a clock which updates itself every second:

                First create a component and paste the code below:

            

                Clock.js

                import {useEffect, useState} from "react";

        

                const Clock = () => {

                        const [time, setTime] = useState(new Date().toLocalTimeString());

                        useEffect(() => {

                                setTimeout(() => {

                                           setTime(new Date().toLocalTimeString());

                                }, 1000)

                        })

                        return(

                                <>

                                    <h1>{time}</h1>

                                </>

                        );

                }

    

                export default Clock;

                Observe the output, you'll notice that clock updates itself every second. It is because useEffect() runs on every render. And the component renders when state changes. As you can see that state is changing after a second.

                Let's talk about the second parameter passed in useEffect():

                                    useEffect(function, dependency)

                    Second parameter is optional, it accepts an array. We can call useEffect() in following ways

                    1. Without passing any dependency:

                            useEffect(() => {})

                                     it runs on every render, as shown in above example.

                    2. With passing an empty array:

                            useEffect(() => {}, [ ])

                                    it runs only on the first render, it is same as class component componentDidMount() method.

                    3. Passing a value it can be mutiple props or state values

                            useEffect(() => {}, [state, props])

                                    it runs when the value of state or prop changes.

Note: useEffect() is widely used to make an API call on page load.

We'll discuss other react hooks later in this tutorial.

Continue Learning: useRef Hook