React useEffect Infinite Loop even though dependency list is provided

Question

I just started studying React Hooks so I'm kind of a newbie here.

I'm struggling to find out why the below code falls into an infinite loop.

I can't find any problems with a code.

Is there anyone who could sort out this problem?

import React, { useEffect, useState } from "react";
import axios from "axios";

export interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

function PostFetchingOne() {
  const [id, setId] = useState(1);
  const [post, setPost] = useState<Partial<Post>>({});

  useEffect(() => {
    axios
      .get(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .then((res) => {
        setPost(res.data);
        console.log("post => ", post);
      })
      .catch((err) => {
        console.log(err);
      });
  }, [id, post]);

  return (
    <>
      <div>
        <input
          type="text"
          onChange={(e) => setId(+e.target.value)}
          value={id}
        />
      </div>
      <div>{post.title}</div>
    </>
  );
}

export default PostFetchingOne;

Thanks, Krushnasinh for the feedback. removing dependencies will definitely stop an infinite loop but it also prevents state from working properly. — Ryan Kim
– Ryan Kim, Commented Sep 30, 2021 at 12:56
You should only remove post from dependencies. id is a correct dependency, post is not. If you want to console.log your post state that should be in a dedicated useEffect and that will certainly have post as a dependency: useEffect(() => { console.log('post => ', post); }, [post]); — lbsn
– lbsn, Commented Sep 30, 2021 at 12:56

Ben Cohen · Accepted Answer · 2021-09-30 12:56:34Z

1

The second param of useEffect is an array of dependencies - when they change, useEffect will fire again. Inside your useEffect action, you perform an update to "post" on your axios get's callback.

Hence, until the axios get will fail, you'll have an infinite loop.

The solution here probably will be to remove "post" from the useEffect's dependency array.

answered Sep 30, 2021 at 12:56

Ben Cohen

1,4101 gold badge10 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan Kim Over a year ago

Great! Thanks, Ben for an accurate answer. It is working perfectly.

Collectives™ on Stack Overflow

React useEffect Infinite Loop even though dependency list is provided

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related