Why we use useEffect? and useEffect Hook more general knowledges

Perform side effects in function components.

• Using Effect
• Data Fetching
• Manually changing the DOM
• API Calling
• Managing the outside world data
• Timer setting
• Replacement of - componentDidMount(), - componentDidUpdate(), - componentDidUnmount()

useEffect(callback, [dependencies array]) is the hook that manages the side-effects in functional components.

• Callback argument is a function to put the side-effect logic.
• Dependencies is a list of dependencies of your side-effect:
  • If we don’t pass dependency variable then useEffect hook will only called when our component is rendered.
  • If we pass an empty array to useEffect then our component will be rendered for first time when a component is rendered. To re-call useEffect hook we have to refresh our page.
  • If we pass dependencies to useEffect hook, then useEffect will executed every time passed variable data is updated.

useEffect will run after every render.

Need to Use multiple useEffect for explaining multiple effects.