Skip to content

Instantly share code, notes, and snippets.

@ignatius22
Last active June 11, 2021 20:36
Show Gist options
  • Select an option

  • Save ignatius22/c87f5edfe172f8228ac008bf754d0ed8 to your computer and use it in GitHub Desktop.

Select an option

Save ignatius22/c87f5edfe172f8228ac008bf754d0ed8 to your computer and use it in GitHub Desktop.
Result of converted component from class in to a funcrional component.
import React, { useEffect } from "react";
const MyComponent = ({ fetchDrafts, fetchHistory }) => {
useEffect(() => {
fetchDrafts();
fetchHistory();
const fetchDraftsTimer = setInterval(() => {
fetchDrafts();
}, 120000);
return () => {
clearInterval(fetchDraftsTimer);
};
}, [fetchDrafts, fetchHistory]);
return null;
};
export default MyComponent;
@ignatius22

ignatius22 commented Jun 9, 2021 via email

Copy link
Copy Markdown
Author

@andrew-schenk

andrew-schenk commented Jun 10, 2021

Copy link
Copy Markdown

You are close.

  • The original class component was missing critical logic that is also absent from here
  • Double check your props and dependency arrays. They look odd
  • Proper formatting will make it more readable

@ignatius22

Copy link
Copy Markdown
Author

critical logic will be to clear the interval after setting it.
"fetchDraftsTimer" shouldn't be passed as a dependency or props.
I think everything looks okay now. Please kindly review.
Thanks.

@ignatius22

ignatius22 commented Jun 10, 2021 via email

Copy link
Copy Markdown
Author

@andrew-schenk

Copy link
Copy Markdown

That's right.

@ignatius22

ignatius22 commented Jun 11, 2021 via email

Copy link
Copy Markdown
Author

@ignatius22

ignatius22 commented Jun 11, 2021 via email

Copy link
Copy Markdown
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment