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

・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!

DISCUSSION (3)
 

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.

Classic DEV Post from Jan 31

What are the least intuitive fundamentals and best practices in software development?

Some things we do kind of make sense in and of themself. Some things have evolv...

JavaScript Full Stack Developer currently working with fullstack JS using React and Express. Follow me if you’re interested in JS web development stuff
  1. Read Post 🤓
  2. Bookmark Post 🔖
  3. Profit??? 🤔