React Components with Class Components

Class components, although currently less used due to the popularity of functional components, played a crucial role in the early history of React. The introduction of Hooks revolutionized development within the framework, but understanding both approaches is essential, especially when dealing with legacy code. This article explores the differences between these two ways of creating components and provides an overview for beginners and up-and-coming developers.

What Are Class Components?

Definition Class components are defined using the class keyword and extend React.Component, reflecting the Object-Oriented Programming (OOP) paradigm that was predominant when React was first released in 2013. This approach used inheritance principles to facilitate code reuse and modularity. Class components require the implementation of the render() method, which defines the user interface, and offer specific methods to manage different stages of the component's lifecycle.

Basic Structure The structure of a class component includes:

• A class that extends React.Component
• A render() method that returns JSX
• The ability to include lifecycle methods and state management

Example:

javascript        

CopiarEditar

class MyComponent extends React.Component { constructor(props) { super(props); this.state = { counter: 0 }; } increment = () => { this.setState({ counter: this.state.counter + 1 }); }; render() { return ( <div> <p>Counter: {this.state.counter}</p> <button onClick={this.increment}>Increment</button> </div> ); } }

State and Lifecycle

State: Managed with this.state and updated with this.setState().

Lifecycle: Methods such as componentDidMount() and componentWillUnmount() help manage the different stages of the component's life cycle.

Some important lifecycle methods include:

• constructor(): Initializes state before mounting
• componentDidMount(): Called after the component is mounted
• componentDidUpdate(): Executed after the component is updated
• componentWillUnmount(): Called before the component is unmounted

Other less common methods, like getDerivedStateFromProps() and componentDidCatch(), are used for specific cases such as performance optimization and error handling.

What Are Functional Components?

Definition Functional components are JavaScript functions that return JSX. They represent the modern and simplified approach to creating components in React. With the introduction of Hooks, functional components began to offer a more practical and flexible way to manage state and lifecycle, reducing the complexity associated with classes. This evolution was driven by the pursuit of greater simplicity and better code reuse through custom Hooks like useState and useEffect. This change also addressed limitations of class components, such as difficulties in logic sharing and lifecycle methods, consolidating functional components as the predominant pattern in React development.

Basic Structure The structure of a functional component is more concise and uses Hooks to manage state and lifecycle. This structure follows the base of a normal JavaScript or TypeScript function that returns JSX code. This simplicity makes functional components intuitive and flexible in building interfaces.

Example:

javascript        

CopiarEditar

import { useState } from 'react'; function MyComponent() { const [counter, setCounter] = useState(0); return ( <div> <p>Counter: {counter}</p> <button onClick={() => setCounter(counter + 1)}>Increment</button> </div> ); }

Main Hooks

• useState: Manages the component's state
• useEffect: Replaces lifecycle methods such as componentDidMount and componentDidUpdate

Logic Reuse

The logic in functional components is shared through custom Hooks, facilitating modularity and reuse.

Comparison Between Class Components and Functional Components

Conclusion

While class components were fundamental in the early days of React, the introduction of functional components and Hooks revolutionized the way we build interfaces, which is the core focus of React. Functional components are simpler, enable greater code reuse, and are widely adopted as the modern standard, making it highly discouraged to start new applications using class components.

However, understanding class components remains relevant for dealing with legacy code, something common in the daily life of a developer. Knowing both approaches allows you to maintain older applications more effectively, avoiding surprises when dealing with legacy systems. Therefore, mastering both approaches is a valuable skill in the React world, just as understanding different ways of solving problems in other languages is essential for anyone starting their career, as much of the work in early stages often involves maintaining existing code.

Just like in the technology world, React constantly seeks to improve and optimize the creation of interfaces. The shift in how components are created wasn’t the only change since its launch. For example, the create-react-app command, once essential for bootstrapping projects, is now discouraged in React's own documentation, which recommends alternatives like Vite. This change provides greater freedom in structuring applications, allowing developers to customize their setups more easily and opt for faster, modern configurations.

Moreover, with React 19, additional changes have been introduced, promising even better development experiences. Changes that I will certainly address in future articles. If you’ve been following this journey, stay tuned — the evolution of React is constant, and understanding these transformations will help you stay ahead in the interface development field.