Let's refactor our GitHubClientProvider
class component to a function component that uses hooks. This one's pretty interesting because we can use useEffect
to encapsulate everything we need for a single effect, truly separating that concern within our component.
perhaps I am missing something, and I can't seem to locate it on your github. Your functions for logout / login are referecing setError and setClient, but how? Those state setters live in another function, so I am a little unsure how you are accessing them.
Hi Dean 👋
Give it a closer look. The state setters live within the closure of the GitHubClientProvider
function and logout
and login
do as well, which is why they can access the state setters :)
Hi Kent, I have a question about whether it is a good practice to place functions like logout
and getClient
within closure of the component. As I understand they are get's recreated on the every render. Thanks.
Hi Viktor, Two things about that:
logout
and getClient
need access to variables that are defined within the closure of the function component.I hope that helps.
Hey Kent, in these videos you convert arrow functions to function()
syntax from time to time but it's unclear to me what the reasoning is behind when you do this. e.g. in this video at 05:34. Could you explain what the distinction you're making is?
It really doesn't matter all that much which is why I don't really make much of a mention of it. For me it's mostly a preference. Maybe this will provide additional insight: https://www.briefs.fm/3-minutes-with-kent/64
Gottcha - I was just thrown because you were alternating between the two syntaxes. Was wondering if I was missing something important. Thanks for the quick reply!
7:10 -> Not sure about having 2 behavior in one function is more simple to understand but sure it is shorter