Last active
June 2, 2021 18:13
-
-
Save ogwurujohnson/9c6edfae770e81d07d0ecad752c2c78f to your computer and use it in GitHub Desktop.
Converting class component to functional component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 oftenMyComponent
re-renders.https://stackoverflow.com/questions/58579426/in-useeffect-whats-the-difference-between-providing-no-dependency-array-and-an