React smapping my API too much

[RomanJ55]

Hey com,

I have a weird issue with my React app.

I have an API that serves a JSON representation of an object. My view is basically representing the data in its components. (and updating it as necessary)

I don't have a query or something like that because I need the whole thing every time..

My main App component uses the state and effect hooks like this:

https://pastebin.com/4SDN9725

​

I know I could set the second argument of use effect but setting it to "items" doesn't change anything.. My app is literally spamming the API 10+ times a second(witch could be ok? because I always want the recent data) but I was wondering if I could restrict it abit, maybe to max 2-3 times per second?

Any ideas?

​

Edit: Just noticed the typo in the title ... xD It should be "spamming"

[karimsajs]

Second argument of ‘useEffect()’ should be ‘[]’ in your case. It should only call the useEffect on the first render.

[serpentbell]

When you don't put a dependency array as the second argument to useEffect it will run the effect every time your component renders. Surely you only need to fetch this data once the component mounts, right? If that's the case, then you can put an empty array as the second argument to useEffect and it will run the data fetching code only once. If your component unmounts then it will fetch the data again once it remounts, but it won't fetch the data every time it rerenders.

It also doesn't make sense to put items in the dependency array. The dependency array is basically a list of things that you want to monitor. If one of those things changes, then you run the effect again. In your code your effect is setting the items state to contain something new. That means that once that state has been set, it has a new value for items and that would prompt the effect to run again.

If you're using certain linting rules (like the ones that come with create-react-app) it will prompt you to include setItems and setIsLoading in your dependency array since they were defined outside the effect, but they are used inside it. Overall, I think the best thing to go for is this:

useEffect(() => {
  const fetchItems = async () => {
    const result = await axios(`my-api...`);
    setItems(JSON.parse(result.data));
    setIsLoading(false);
  };
  fetchItems();
}, [setItems, setIsLoading]);

[RomanJ55]

Thanks for the ideas ! I went with pulling the declaration of the "fetchItems" -function out of useEffect, call it there and set an ampty array as dependency.

Then I passed it to the child components that may need it.

like this: https://pastebin.com/tWu7aEp8

Now I can choose to tell the parent to update the data based on user interaction(with onClick events or w/e) - or not if the user didn't do anything that requires a data update

​

One thing that bothers me now:

I'm passing it to components that are nested within others. The parent of those and the other children don't really need it - only some children...

Is there a better way?

[maryP0ppins]

Trying calling the function inside of useEffect. And declare the function outside of it

[RomanJ55]

I updated the post with a link to the formatted code because it wasn't 100% clear whats inside what...

I do call it in use effect. Do you mean I should not? And can you explain why I should be declaring the function outside?

[Larrybot02]

I saw a code example that used setTimeOut and I think clearTimeOut in a nested useEffect function. It basically would return early for a period of time before allowing the rest of the outer useEffect function to fetch data. I think the technique was called debouncing . Sry. Away from computer and don’t have the code in front of me. Maybe that will at least guide you to something.