DEV Community

Cover image for Project 18 of 100 - Higher Order Tinder
James Hubert
James Hubert

Posted on

Project 18 of 100 - Higher Order Tinder

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

Enter fullscreen mode Exit fullscreen mode

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!

stackoverflow-screenshot

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)

Collapse
 
samuelcasey profile image
samuel-casey

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 😄

Collapse
 
jameshubert_com profile image
James Hubert

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.