Cleaning up our Functional Components with Custom Hooks
In this lesson we take all of the hooks and logic from our <ExchangeRate> component and put them into a custom hook called useCurrencyCodes().
What's the difference between a custom hook and a function we can use to organize our logic? Not much, really. Because custom hooks usually execute other hooks, they cannot be called conditionally (meaning we can't say if (ready) useCustomHook()). They must be called in the component's function body or in another custom hook. Redux hooks and React's built-in hooks are both included in our custom hook and work seamlessly together.
Not only is it convenient to organize your logic in custom hooks, it makes them more sharable and testable as well. I don't recommend putting all of your logic into one large hook, but instead, consider where it would make your component easier to read by combining related hooks and logic into their own function.
For more details about this pattern please check out this article from the React docs: https://reactjs.org/docs/hooks-custom.html
Jamund Ferguson: [0:00] Open up ExchangeRate.js and at the bottom of the file, type function useCurrencyCodes(). Inside that function, we're going to copy over the first few lines of our component, paste them in there -- dispatch, supportedCurrencies, currencyCode and updateRates variables, just going to bring them all down into our useCurrencyCodes custom hook.
[0:24] Then, we're going to return only the ones that we need in our function body. We will return { supportedCurrencies, currencyCode, updateRates }, using the object shorthand syntax. Then, in our component body, we can say const, paste in that exact same line and say = useCurrencyCodes().
[0:47] We've simplified our component body a little bit. We've taken all the variable declarations out of the main component body, and we put them in our custom hook. We can put more stuff in the hook if we'd like. All of the logic for getting the currency codes which we have in this useEffect hook, and then the getLatestExhangeRates() function, we can also put into our custom hook.
[1:08] Let's take that out of there, put it right down here before we return, and now our custom hook contains all the logic that we need to seed our app with exchange rates. It turns out we're not actually using any of those variables outside of our hook, so we can replace this whole line with simply useCurrencyCodes.
[1:27] If we save that, we can get rid of the return here, and simply do our logic in this custom hook and let our component be focused on rendering, which is really what it's meant to do.
[1:40] As we refresh our app here, you can see that I can change the currency codes, I can update the amounts. Everything's working exactly as it's supposed to, and now our component is extremely clear and easy to understand.