useEffect() React Hooks in React Js

useEffect() React Hooks in React Js

Hello Geeks, In this article we will learn about useEffect() react hooks in react js. As we know react team introduce React Hooks in React version 16.8. In this release they build some predefined react hooks. So today we will learn about useEffect() react hooks in react js . useEffect() React Hooks is very important most commonly used react hooks after useState(). In simple words, useEffect() react hooks behave as per its name. It does the side effect. By the term “side effect” you might remember that we can achieve that in class based component using lifecylce method componentDidMount() and componentDidUpdate().

As you know that when using React hooks in your react application then you don’t need to use class base component. You can but you shouldn’t. So to achieve the side effect in functional component we use the useEffect() react hooks. For example calling API, after component render, updating API data after re-render.

useEffect() React hook





You can import useEffect() in your functional component as below syntax.

import React, { useEffect } from 'react';

useEffect() react hooks has two parameter. First parameter cause the side effect like your api call. Second parameter is dependencies

Sample code syntax for useEffect() React hooks. In this code, we are calling the api that will be first parameter. And passing empty array as dependencies as second parameter.


const app = () => {

useEffect({
	fetch('https://jsonplaceholder.typicode.com/todos/1')
		.then(response => response.json())
		.then(json => console.log(json))
},[])

}

useEffect() React Hooks Dependencies

useEffect() react hooks has also dependencies based on your business logic. if we discuss on above code snippet then we can have three scenario that will explain if we need to pass dependencies in useEffect() or not.

  • If you want to save the api data in any variable only and not want update any state then you don’t pass dependency as second parameter in useEffect() react hooks
  • If you want to update your state with your API data then you need pass empty array [] as dependency. Otherwise it will end to infinite loop. This behavior is same as componentDidMount() in class based component.
  • If you have some external dependencies on your API call like passing dynamic id or any other argument then you have define that dependency as second parameter in useEffect() react hooks. Here empty array [] will not work. It will cause infinite loop because dependency will blanks and it will be always true. it will keep rendering calling again api. This behavior is same as componentDidUpdate() in class based component.




Example of useEffect() React Hooks


import React, { useState, useEffect } from 'react';

export default props => {
  const [apiData, setApiData] = useState(null);

  useEffect(() =>{
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => {
        setApiData(json)
      })
  },[]);

  return (
    <div>
      <h1>useEffect() React hooks  Example</h1>
      {apiData && <div>
          <h2>ID: {apiData.id}</h2>
          <h2>UserID: {apiData.userId}</h2>
          <h2>Title: {apiData.title}</h2>
          <h2>Status: {apiData.status}</h2> 
        </div> }
    </div>
  );
};

useEffect() React Hooks

Hope, this article helps to understand the basics of useEffect() React hooks in React JS.

Thanks for reading. Happy Coding 🙂

 

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.