React useEffect run conditionally

Question

How do I prevent my React component from fetching images every time the component is rendered and to fetch them from the store instead? I don't want to get rate limited by doing the API call over and over again, but the problem with useEffect is that it seems to be unaware of the variables being set "outside" of the effect. It seems to completely ignore !images.length and when I log the value for images.length it is always 0 :(

Images.tsx

const dispatch = useDispatch();
const images = useSelector(selectedImages);

useEffect(() => {
  if (!images.length) {
    dispatch(fetchImages());
  }
}, []);

`Images` should be in your useEffect’s dependency array. Second arg in your useEffect should be `[images]` — johnny peter, Nov 06 '20 at 10:07
@johnnypeter wont that would be re-render every time `images`'s length will change ? — BhaskerYadav, Nov 06 '20 at 10:10
Yes that will trigger everytime the length changes. To avoid fetching an already fetched image, you can maintain and internal cache to book keep what is already downloaded and skip them. — johnny peter, Nov 06 '20 at 10:12

score 0 · Answer 1 · answered Nov 06 '20 at 10:23

0

With React hook useMemo you will only call the API whenever you need it

https://www.robinwieruch.de/react-usememo-hook

https://reactjs.org/docs/hooks-reference.html#usememo

answered Nov 06 '20 at 10:23

Yaiza del Río

106
3

score 0 · Answer 2 · answered Nov 06 '20 at 10:36

It is always logging 0 is because you didn't put anything inside dependency array of useEffect so that whenever React re-render your component, it looks inside the useEffect and see nothing inside the dep array, so it just skip running that useEffect.

When you use useEffect, you should declare dependencies in the array of useEffect that are used inside useEffect

const dispatch = useDispatch();
const images = useSelector(selectedImages);

useEffect(() => {
  if (!images.length) {
    dispatch(fetchImages());
  }
}, [images]); // Our deps

So, let's say:

First, by default it will run the useEffect and do all the logics inside that effect. If the images array is empty, calling the API to get images.
Second, images array is not empty anymore, and the 2nd images is different from 1st images array which is empty, so it still run to the useEffect. But it won't fetch images anymore because you have if condition there.

React useEffect run conditionally

2 Answers2