Using useEffect to get data from an api

Question

I'm trying to fetch data from an API every time a user creates a new post. And I know that if you want to make the request happen when the data changes you can use this:

 const [tweets, setTweets] = useState([])

    useEffect(() => {
       api.get('tweets').then(response => setTweets(response.data))
       
    }, [tweets])

It works, and I don't need to refresh the page to see the new post that has been created. But when I go to Inspect in my app and then to Network, I can see that infinite amounts of GET requests happen, even if I specified the call only when the array changes. Can someone tell me how to solve it? (I don't know if it's normal to happen or something that I need to be worried about)

Vivek Doshi · Accepted Answer · 2020-06-09 16:09:20Z

1

Issue is useEffect dependency [tweets]:

so as per your code it will call useEffect whenever there is a change in tweets,

inside useEffect you are updating it, so

useEffect --> setTweets --> useEffect --> setTweets --> ....

Solution :

useEffect(() => {
       api.get('tweets').then(response => setTweets(response.data))
//}, [tweets]) // <--- remove tests from here
}, [])

As per the comment, you can do something like this :

unmounted is just for to not to get in error of "Can't perform a React state update on an unmounted component."

useEffect(() => {
    let unmounted = false; 
    const timer = setInterval(() => {
       api.get('tweets').then(response => { 
           // you can compare the current tweets with new also and update state only after that
           if(!unmounted)
                setTweets(response.data)
       })
    },5000)
    return () => { 
        unmounted = true;
        clearInterval(timer);
    }
}, [])

edited Jun 9, 2020 at 16:09

answered Jun 9, 2020 at 15:36

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

8 Comments

gabriel_tiso Over a year ago

but if I make this, the request will happen only when the component mounts, and I won't be able to see the new post unless I refresh the page, and I don't want this to happen

Vivek Doshi Over a year ago

@GabrielTisoVinhasdeBrito,so when do you want new posts?

gabriel_tiso Over a year ago

when the user submits a new one

gabriel_tiso Over a year ago

do you have a suggestion/

gabriel_tiso Over a year ago

I don't know if it's normal, but I keep getting GET requests when I check Network (in a much slower rate, that's good). Is it normal, or I have to implement another functionality in your code?

|

Ross Allen · Accepted Answer · 2020-06-09 15:36:21Z

0

Remove tweets from the array of dependencies:

    useEffect(() => {
       api.get('tweets').then(response => setTweets(response.data))

    }, [])

That array means, "whenever one of these values changes, re-run the function". So the function is getting run, getting new tweets, and then getting re-run because tweets changes; that's the infinite loop.

answered Jun 9, 2020 at 15:36

Ross Allen

45k14 gold badges100 silver badges97 bronze badges

1 Comment

gabriel_tiso Over a year ago

if I remove the tweets, I'll have to refresh the page to see the new post

Collectives™ on Stack Overflow

Using useEffect to get data from an api

2 Answers 2

8 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Related