Hey! I'm on a mission to make 100 React.js projects in 100 days starting October 31, 2020 and ending February 7th, 2021. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!
Link to today's deployed app: link
Link to the repo: github
This was one of those simple projects where I ended up running into a ton of roadblocks along the way. The kind of roadblocks where you end up learning a lot about the technology you're using.
Higher-Order Components
From my understanding, higher order components have been somewhat replaced by broader use of React Hooks. But the general idea is this. From the React website:
Concretely, a higher-order component is a function that takes a component and returns a new component.
Stated differently, you have multiple components that you want all to have similar capabilities, so instead of recreating that functionality within each component, you create a wrapper which takes an element in as input, and then wrap those elements in the higher order component before exporting it in the child component's JS file.
As mentioned, I thought this one was going to be a walk in the park until I tried to use hooks in my Higher Order Component. In short, you can't directly use useState() in a higher order component.
Line 5:39: React Hook "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks
Since I'd been working on this for two more days than I wanted to I eventually abandoned the click functionality in the HOC and moved the buttons to the child component. This immediately solved the issue albeit in a pretty unsatisfying way since I was left with a lot of questions about how React Hooks work.
The best answer I could come up with is that HOC's don't return a component, but a function that itself returns a component- therefore React hooks don't work since it's not a React component!
The explanation makes sense, but like I said it's pretty unsatisfying. How do you trigger a reload of a component from a JSX element in an HOC?
Apparently HOCs aren't that widely used so I didn't stress too much about it but it was still astonishingly annoying. As Elon Musk purportedly said once, 'You don't understand a problem until you've struggled with it.'
Here's a link to the StackOverflow question I asked about it:
https://stackoverflow.com/questions/65163983/reloading-a-child-component-from-within-a-higher-order-component-in-react/65164322#65164322
If you feel like you have a better answer feel free to drop a comment. You'll be doing me a big favor.
That's it for today. Enjoy!
Top comments (2)
100 React projects in 100 days is a cool way to challenge yourself! I like how you’re learning by using the docs and trying to understand the core tenets of the framework individually. I’m interested to see how you keep progressing, I know I’d definitely have a tough time thinking of new projects and different features of React to work with 100 days in a row. Very motivating and I appreciate you sharing your journey with the world! Keep up the good work 😄
Thanks very much for the kind words @samuel-casey! It's so nice to be able to get on Dev.to and connect with other devs committed to learning like you- it's a good reminder there's a world of coders outside who care about what you're doing, even if it's easy to forget under lockdown.