useEffects without dependency arrays

[rooberrydev]

week7-away-days/src/components/reviews/DisplayReviews.js

Lines 9 to 18 in 1bdfc16

	useEffect(() => {
	async function fetchReviews() {
	let awsReviews = await DataStore.query(Reviews, (item) =>
	item.EventID("eq", eventId)
	);
	setReviewsApi(awsReviews);
	}
	const fetchInterval = setInterval(fetchReviews, 1000);
	return () => clearInterval(fetchInterval);
	});

week7-away-days/src/components/accommodation/DisplayAccommodation.js

Lines 8 to 17 in 1bdfc16

	useEffect(() => {
	const getAccommodation = async () => {
	const accommodation = await DataStore.query(Accommodation, (item) =>
	item.EventID("eq", eventId)
	);
	setAccommodation(accommodation[0]);
	};
	getAccommodation();
	});

useEffects without a second argument with an array of dependencies can run in an infinite loop - since they run whenever the component re-renders, and if you're setting state within the useEffect, then the component re-renders, which re-runs the useEffect, sets state again, re-renders the component, re-runs the useEffect... on and on

to avoid this - I tend to follow these rules

1. if I want it to run only once (the first time the component renders) - use an empty dependency array

useEffect(()=>{
  doStuff()
},[]})

2. If I do something based on a state value, add it to the dependency array so the effect only runs when the state changes between re-renders