Converting class component to functional component

functional-components.js

import { useEffect } from 'react';

function MyComponent({ fetchDrafts, fetchHistory }) {
	useEffect(() => {
		if (!fetchDrafts || !fetchHistory) {
		  return null
                }
		
		fetchDrafts();
		fetchHistory();
		const fetchDraftsTimer = setInterval(() => {
			fetchDrafts();
		}, 120000);

		return () => {
			clearInterval(fetchDraftsTimer);
		};
	}, []);

	return null;
}

I updated the gist

The useEffect needs a dependency array as a second argument. The second argument is optional, but in this case where we only want the code to execute once, i.e. componentDidMount it is required to pass in an empty dependency array []

As the gist is written right now, everything would work until the component re-rendered. After a re-render then the useEffect code would be called a second time. The interval timer would be cancelled and rescheduled from time 0. If some other function was in the setInterval besides fetchDrafts it may never be called depending on how often MyComponent re-renders.

https://stackoverflow.com/questions/58579426/in-useeffect-whats-the-difference-between-providing-no-dependency-array-and-an

That makes sense now. I thought removing the dependency array entirely would force it to run only once, this is my first time learning about this difference. Thanks will keep this in mind going forward.