There was a lot of setup today. Kent had done a lot of amazing work to be able to make the workshops work more smoothly and has a great CLI tool for switching between lessons and branches.
After all I've looked at over the past month, this was a great opportunity to put the use of context into practice. The first bit, was totally natural - using the context to pass down values that are consumed that way instead of being passed down as props. Kent has a post :)
We then did more and moved all of the Auth logic out of the main app and moved to a useAuth() hook.
Here's a relevant and helpful talk from Michael Jackson.
Interesting to see the source baseUrl which is slightly different for Next. There is an answer here which looks good.
Also, setting up a custom error from the
useAuth hook was pretty helpful. We then looked co-locating global context providers to help with source management. This really tidied up the code and made it feel much cleaner.
When you have components are similar, we can often try to extract the code. The problem with that is we often end up passing down a lot of props to alter it. We can create more flexible components though.
Kent has a talk to watch for more on this concept called
In our exercise, this ended up with a component that had more code. But it was clearer and more explicit. We used context, providers and
React.cloneElement - what we got was composable and useful in a range of contexts.
It's a great exercise to think about how much the abstractions we are making are useful - just because we are being DRY doesn't mean we are being more effective.
This is a good follow-up and application of the performance workshop from earlier in the course. We looked at a few things:
React.Suspensedoesn't work with ReactDOMServer)
We covered each of these in some way in the React Performance workshop but this was a great opportunity to increase those skills and put them to the test.