DEV Community

David
David

Posted on

Teaching React Lifecycle Methods?

I'm a high school computer science teacher and while I've used React.js for a couple years now off and on, it's my first time teaching it and I'm definitely no expert. To teach the component lifecycle, I decided to start by introducing class components with componentDidMount, componentWillUnmount, render, etc.

Lifecycle Methods

But hooks are so much cleaner!

At this point in their development, students understand basic vanilla JavaScript like DOM manipulation, objects, events, functions, async/await, fetch API; you know, the sort of typical prerequisites to learning a framework. When I was learning React a few years ago, hooks weren't a thing yet, but they were natural for me to pick up because I felt I understood the component lifecycle, setState, etc. clearly from seeing the methods in the class components.

I guess my question is, can a student jump straight in to using React hooks in functional components or should they learn class components first? I understand that hooks are often the recommended way to go in practice, but can introducing them too early be too confusing?

Top comments (5)

Collapse
 
esin87 profile image
Esin Saribudak

Hi David! We've discussed this in our program and debated the pros and cons of teaching class-based components, functional components with Hooks, or both. In our most recent group we taught Hooks exclusively, and I'm happy to share that it went really well. From what we saw, students can 100% jump into Hooks when they're new to React, and it gave them a sense of comfort and fluency with the most modern way of writing stateful React components. As someone who learned class-based components first, their ability to grasp Hooks so quickly and so well surprised and impressed me. A couple drawbacks to consider are the fact that so much of the React content out there uses classes, and class-based components can really draw from and strengthen students' understanding of JavaScript objects, classes, and OOP, as another commenter mentioned. But that being said, it seems like Hooks is the future of React, and as tech educators, we should consider setting students on the path toward understanding a technology in the way it will be used going forward.

Collapse
 
buckldav profile image
David

I totally agree with the focus to prepare students for the future. Thanks for the input!

Collapse
 
usama3627 profile image
Usama Mehmood

When I started React, I directly jumped to hooks instead of opting or class based components. I understood them with a slight difficulty and then went for application development. I learned most of the already built apps use class based components. So many developers already use it and when I saw them, I got confused. So, then I took another course who taught class based components first and then moved onto hooks. And this time, it was much better. I learned easily. Coming from OOP concepts, life cycle methods made more sense. Now for working, yeah I prefer using hooks but I am glad that I learned about life cycle methods.
So I would say, teach them class based components.

Collapse
 
buckldav profile image
David

Thanks for sharing your experience!

Collapse
 
aalphaindia profile image
Pawan Pawar

Thanks for sharing!!