DEV Community

Nathan Sebhastian
Nathan Sebhastian

Posted on

Is there a way to explain hooks without mentioning class component?

Is there a way to explain about hooks without mentioning or comparing it to class components? I find it hard to explain about useState() without showing how it's done with this.state = {} and setState() 😐

I'd like to explain about state using hooks without ever showing how it's done with class component to React newcomers. Even in the documentation on useState() explains by comparing the equivalent class component first

Thanks everyone!

Discussion (4)

httpjunkie profile image
Eric Bishard

Yes, as well I don't think you want to start with useState in this scenario. Instead, you should teach about regular JS functions and how something very simple can be turned into a Hook. I have created an article about custom Hooks, and aside from using the word class a few times in the article I could remove that information about hwo things "use to be done". But yeah I think teaching how to create simple and custom hooks is a great way to teach about the subject without talking about classes.

I also think that when teaching about useState that it's good to tell the backstroy about classes and how this.state was accessed and used in a simple scenario and then explaining how that works with Hooks. This could be a second part to learning Hooks after you teach custome Hooks first.

dylanesque profile image
Michael Caveney

I think it's definitely possible, but I wonder what the mental gymnastics to do so will accomplish, given that hooks have been a part of "official" React for barely two weeks, and that stateful components are all over the place in production code. I've pondered this question myself, and I think about that thing that Kent C. Dodds said about "You should feel that pain caused by a problem before you reach for a third-party dependency that solves it.", and that hooks are similar. They certainly reduce a lot of code, but learning about how "vanilla" state was handled with class components, Redux, etc will contextualize how great hooks are, and precisely how much effort they can save us.

sergiodxa profile image
Sergio Daniel XalambrĂ­

The same way you could explain classes without explaining Hooks, it’s easier to do the comparison if you already know classes, but for someone new to React there is no reason to mention classes, explains what state is, what useState returns and how to use it.

frontendtony profile image
Anthony Oyathelemhi

Simple answer: I can't explain it either

But I don't think I'll want to do that just yet. It's like explaining Array methods like map without mentioning for loops