DEV Community

Cover image for The Evolution of React: A Guide to Class vs. Functional Components
Maria Mendonca
Maria Mendonca

Posted on

The Evolution of React: A Guide to Class vs. Functional Components

#webdev #java #react #beginners

Hey guys!

It's great to be back! After a short break, I'm thrilled to dive back into the world of React with a topic that's central to modern web development: the big shift from class components to functional ones.

The evolution of React from class components to functional components isn't just a simple facelift or a change in syntax—it represents a profound shift in how we approach component design and manage complexity. It's an intentional move toward making React codebases more predictable, understandable, and reusable.

The Problem with Class Components

Before the introduction of Hooks, the primary way to build stateful, complex components was through the class component model. While powerful, they introduced several pain points that often led to confusion and verbose code:

  • Complex this Context: Class components rely heavily on the JavaScript class syntax, which brings with it the tricky concept of the this keyword. Developers constantly had to worry about correctly binding methods in the constructor to ensure this referred to the component instance inside event handlers. This was a frequent source of bugs, especially for developers new to React or JavaScript.
  • Confusing Lifecycle Methods: To manage side effects (like data fetching, setting up subscriptions, or manual DOM manipulation), you had to spread related logic across several specialized lifecycle methods: componentDidMount, componentDidUpdate, and componentWillUnmount. For example, setting up a subscription in componentDidMount and tearing it down in componentWillUnmount meant two pieces of related logic were physically separated, making components difficult to read and maintain.
  • Logic Reuse Difficulty: Sharing non-visual, stateful logic between components was cumbersome. It typically required implementing advanced patterns like Higher-Order Components (HOCs) or Render Props. While effective, these patterns often resulted in a deeply nested "wrapper hell" in the component tree, hurting code readability and making it difficult to trace data flow.

State vs Class
Image generated using Gemini

The Rise of Functional Components

Initially, functional components were a simple alternative, sometimes called "stateless functional components." They were just JavaScript functions that accepted props and returned JSX. They were excellent for presentational logic but couldn't hold their own state or manage side effects—they were functionally incomplete for complex tasks.

This changed everything.

The modern functional component is the intended future of React. It provides a cleaner, simpler, and more direct way to express component logic. By embracing functions as the primary building block, React can optimize rendering and allow developers to collocate related logic, regardless of whether it’s state management or a side effect.

The Magic of Hooks: Enabling Stateful Functions

The key to the entire evolution is Hooks. Hooks are special functions that let you "hook into" React features like state and the component lifecycle from within a functional component. They are what finally gave functional components parity with—and eventually superiority over—class components. We will be learning about Hooks in Part 2 of the series.

The Comparison

Let us see the code comparison of class based and functional based components with a simplest example of "Hello, World" since we are currently working with the program basics.

Class Component
This approach uses a JavaScript class that extends React.Component. It must include a render() method that returns the JSX you want to display.

import React from 'react'; class Welcome extends React.Component { render() { return ( <h1>Hello, {this.props.name}!</h1> ); } } export default HelloWorld;
Enter fullscreen mode Exit fullscreen mode

Key Points:

  • It's a JavaScript class.
  • You must import React and extend React.Component.
  • The JSX is returned from a render() method.

Functional Component
This is a standard JavaScript function that accepts props as an argument and returns JSX. This is the modern and recommended approach for writing React components.

import React from 'react'; function Welcome({name}) { return ( <h1>Hello, {name}!</h1> ); } export default HelloWorld;
Enter fullscreen mode Exit fullscreen mode

Key Points:

  • It's a simple JavaScript function.
  • It takes no arguments in this simple case.
  • The JSX is returned directly by the function.

Homework Challenge:

To make sure these concepts stick, here is a small challenge for you:

Homework
Image created using Canva

This hands-on exercise will make the transition from class to functional components crystal clear.

How to Submit Your Solution
If you want to share your work or get feedback, you can share a screenshot of your finished project in the comments below. You can also paste your updated App.jsx code directly into the discussion to get feedback from me and the community. The next article will have the answer to this homework problem.

The Upcoming Article will cover the topic of reusability and event handling. Stay tunes and See you on Friday!

Reference

Let's Connect!

If you found this article helpful, please consider following me on Dev.to. You can also connect with me on these platforms for more content and conversation:

Top comments (0)