A Beginner’s Guide to React Classes vs Hooks

Table of Contents

• Meet Your Expert: Robert Gardner
• React 101 – What is ReactJS?
• What is a Class in React?
• What is a Hook in React?
• Classes vs Hooks – Which is Better?
• The Web Development Curriculum at LearningFuze

The creation of React revolutionized how we interact with the browser. But what are React classes and hooks? And do today’s developers use classes and hooks interchangeably? Robert Gardner, an Instructor at LearningFuze (and formerly Director of Engineering at Google!), explains the basics of hooks and classes, and why hooks are becoming more popular on the job. Plus, find out how LearningFuze’s continuously updated curriculum is preparing students for successful tech careers, not just for landing their first tech role.

Meet Your Expert: Robert Gardner

• Robert Gardner is an Instructor at LearningFuze’s full-time, in-person Full Stack Web Development Bootcamp. Before LearningFuze, Robert spent 14 years in engineering at Google!
• Robert describes himself as self-taught and taught through on-the-job training. When Robert was working on his Physics PhD at Stanford, the Physics department got its first MacIntosh computer (watch the video for his full story!) He worked in physics-related jobs for a few years, but switched careers into software engineering because Robert knew he loved computer software more than physics.

React 101 – What is ReactJS?

When the World Wide Web was first invented, the intent was simply to share documents, which were static and unchanging and you couldn't interact with them. Over time, it became clear that the web was not just amazing for delivering these documents everywhere, but also for creating applications.

When you create an application, you have to execute code inside the browser in order to interact with the user. For example, if the user clicks a play button on a video, you want that video to start playing, but to do that you have to run code inside the browser. JavaScript was invented by Netscape in order to make that easy. This went well for a while, but as our websites became more complex, it became very hard to write all that JavaScript code and keep it bug-free. To address this problem, a lot of companies started introducing code libraries, or frameworks, that they could use to make it easier to write more complex websites.

React was developed by Facebook and it's currently the most successful of these JavaScript frameworks, because it lets you easily create “components”, which are visual elements on the screen, and then you reuse those components throughout your site. For example, in the video case I could create a video component that encapsulates all the buttons and the user interaction and everything else necessary to play, pause, and restart the video. I can use that component in multiple different places on my site, and can even make it available to other developers to use in their sites, which has been the burgeoning open source list of React components that you can use all over. 

What is a Class in React?

In React, Classes make use of JavaScript’s class inheritance mechanism. A developer creates a component by declaring a class that extends React's Component class and then overrides the component lifecycle methods, which tell React what to do as the component evolves on the screen. We refer to them as “lifecycle methods” because they're called when the component is first created or “born,” when it's first drawn on the screen, when the user interacts with it, and when the component is removed from the page where it “dies.” 

What is a Hook in React?

Hooks in React are simply special functions that React uses to manage the component lifecycle. There's a hook function to get and manage the component state, and there's one for indicating what should happen when the component is first drawn on the screen, as well as other things. A hook is used to manage the state.

How are hooks typically used by software engineers?

If you're writing React code with hooks, then instead of creating a class, you simply define a function that has a few simple rules to follow, but otherwise it's just a standard JavaScript function. When you're managing the lifecycle, you call the React hook functions. 

Both Hooks and Class Components are JavaScript tools!

Classes vs Hooks – Which is Better?

Classes are being phased out because it's much more convenient to write code in hooks. You can write more complex code and better understand what you're doing. It is still possible for class-based components and hook-based components to run in the same application and even to interact with each other, which makes it nice for evolving and migrating from one to the other. There are a lot of older React components that were written before there were hooks. Today, most of the new React code is being written using hooks. 

At LearningFuze, we have switched to teaching only hooks in order to better prepare students for what they're likely to encounter in the job market. Since most new React code is now written using hooks, our students are better off if they learn hooks instead of learning classes. They may encounter legacy code that uses React classes, but if you know hooks well, it's fairly easy to read and understand. If you end up at a company that's still using React code with classes, you can pick it up without too much trouble. As companies migrate their code from classes to hooks, most of the new code is being written using hooks because you can write better, more stable and reusable code. 

The Web Development Curriculum at LearningFuze

Robert, how is LearningFuze keeping their curriculum up-to-date with today’s workforce needs?

We look at the curriculum frequently. The best way we can keep our curriculum up-to-date is to have instructors who have recent industry experience, which keeps us aware of what's actually happening in the industry. We know what skills are truly important and what students will be doing once they start working on their own. Another thing we do at LearningFuze is stay abreast of the types of questions that are being asked in job interviews and the skills that are being requested.

We also have a very active alumni community that we heavily interact with. They give us information about what skills they need, what new things they're learning, what they learned at LearningFuze that wasn't very useful, and then how we can better enhance the curriculum to meet their needs.

What are the biggest changes you’ve made to LearningFuze’s Web Development curriculum so far? 

Our curriculum is all JavaScript. This year, we switched from teaching JavaScript ES5 to teaching only ES6+, including const/let, promises, optional chaining, async/await, and so on. We also switched from teaching React classes to teaching only React hooks. This switch is highly beneficial to our students since they're learning a more modern and widely used technology.

We've taken a very close look at everything we teach and want to make sure it provides a tangible benefit. Students have to absorb an awful lot of material in a very short time, so we focus only on the things that they'll use early in their career. We’re laying a strong foundation and adapting the curriculum to support students as they develop in their careers.

How is this iterated curriculum preparing career changers for today’s tech jobs?

My biggest goal as an instructor is to teach students skills they'll need to build a successful career. Obviously that starts with getting a job, but if they're not advancing in their career after they get that job, then I think we have failed them. They should be getting promotions, pay raises, and better work. I find that too many coding schools emphasize just getting that first job. I believe that instead of measuring a coding camp by its job placement rate, we should be measuring them by their alumni's advancement in their careers. We focus on depth instead of breadth because we think that better prepares students for a new career. It’s much easier to learn a new technology if you know one really well. 

What inspired you to teach at LearningFuze, Robert?

I had a successful and enjoyable career of 14 years at Google with my final role as Director of Software Engineering. Throughout my career, I put a lot of effort into teaching and mentoring other engineers. While at Google, a colleague and I created several classes that we taught to Googlers all around the world — the most popular were on technical leadership and writing clean code — and that was very satisfying to me.

I really enjoyed helping others advance in their careers, so when I was set to retire from Google, I found that I really missed the experience of helping others. I looked into teaching and finally found LearningFuze. I was impressed with their approach to teaching and their success at helping students become software developers, so I decided to join them and I'm glad I did! I've had a lot of fun and I really love helping people launch a career in software development.

Find out more and read LearningFuze reviews on Course Report. This article was produced by the Course Report team in partnership with LearningFuze.