Learn React Hooks

Creating a local Login Effect Hook

Repeating a similar process to the local Register Effect Hook, we are also going to extract the Effect Hook from our Login component to a separate useLoginEffect Hook function. This function will accept the following values from other Hooks as arguments: user, dispatch, and setLoginFailed.

Let's create a local Hook for the Login component now using the following steps:

1. Edit src/user/Login.js and define a new function outside of the component function, right after the import statements:

function useLoginEffect (user, dispatch, setLoginFailed) {

2. For the contents of the function, cut the existing Effect Hook from the Login component and paste it here:

    useEffect(() => {        if (user && user.data) { if (user.data.length ...