React JS - useEffect Hook

useEffect hook is a life cycle method used in Functional component.

It is called when :

• Component is created.
• State/Props is updated.

It is a combination of all life cycle methods of Class component.

We can apply conditions inside this Hook.

We can use multiple useEffect() hook in a component.

Example 1 : useEffect() Without applying condition

In the below example, useEffect() is called when component is loaded and whenever component is updated.

Output :

Example 2 : useEffect() with Condition (Taking Two States & useEffect() will be called on Particular State)

In the below example, we have taken two states. We have applied condition that useEffect() will be called on particular state only.

Output :

GitHub :

https://github.com/eramitsinha/React-Dummy/blob/main/src/UseEffectHook1.js

https://github.com/eramitsinha/React-Dummy/blob/main/src/useEffectHook2.js

Interview Question

Can we use useState() inside useEffect()?
YES, but we need to apply condition.