Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Step 3 - Create useLoad custom hook and integrate into App component #7

Open
wants to merge 17 commits into
base: 02-SelectUsers
from

Conversation

Projects
None yet
1 participant
@danieltott
Copy link
Owner

commented May 30, 2019

Our first custom hook! Since we know that both <App> and <Todos> have similar needs regarding fetching data and displaying it, we decided to create a custom hook called useLoad that will take in our async function and a couple options, and return some state related to fetching (isLoading, error, and the actual data), as well as a couple useful functions.

Our useLoad custom hook makes use of useReducer to keep track of this state and creates a load function that runs the actual fetching. load calls dispatch to send actions to our reducer. useLoad also uses useEffect to run the load function the first time the component calling the hook is rendered.

To integrate this into App, we first needed to remove the error boundary created by componentDidCatch, so an easy way to do this is to create a simple higher-order-component called withErrorBoundary that simply passes in a globalError prop to <App> if it catches an error.

Next, we replaced our fetch-related state and fetchUsers with state from useLoad. And we used useState to keep track of the filter data.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.