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

twitter logo github logo ・1 min read

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!

twitter logo DISCUSS (4)
markdown guide
 

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.

 

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.

 

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.

 

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

Classic DEV Post from Jun 17

Should a button communicate the current state, the intended behavior, or both?

Nathan Sebhastian profile image
JavaScript Full Stack Developer currently working with fullstack JS using React and Express. Follow me if you’re interested in JS web development stuff

Sore eyes?

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ❤️