Where Have All the Classes Gone?

It’s the summer of 2018. Birds chirp, skies are blue, and the word “Covid” remains blissfully absent. Back then, React development thrived on a clear separation: class components for state and logic, functional components for presentation. With TypeScript, JavaScript finally felt mature, embracing object-oriented practices familiar from other languages (practices that earned PHP a few jabs for its lack thereof).

Fast forward six years, and the landscape has transformed. Spotting a TypeScript class component in a modern React codebase feels like encountering a relic of a bygone era. What caused this functional shift?

A classless community

Several factors contributed to the decline of class components in React, and by extension, a lessened emphasis on OOP in TypeScript for React development:

Hooked on Hooks: React 16.8 introduced Hooks, a game-changer for state and side effects within functional components. Hooks like useState and useEffect offer a concise and lightweight alternative to the often-verbose class syntax. This shift aligns well with TypeScript’s focus on type safety and readability – functional components with Hooks tend to be more concise and easier to type-check.
Functional Purity: Functional components, by design, are inherently easier to reason about. They act as pure functions, taking inputs and returning outputs without hidden side effects. This makes them ideal for building predictable and testable UI components, a key tenet of modern front-end development, which TypeScript strongly supports.
Performance: In many cases, functional components can outperform class components due to their simpler structure. This is especially true with optimizations introduced in recent React versions. For performance-critical applications, every millisecond counts, and TypeScript can help ensure these functional components are well-typed and optimized.
Composition over Inheritance: Functional components promote a compositional approach to building UIs. Smaller components can be combined to create more complex ones, fostering reusability and maintainability. This aligns well with TypeScript’s ability to define interfaces and types for these smaller components, leading to cleaner and more maintainable code.

Why less OOP in TypeScript & React?

While TypeScript fully supports Object-Oriented Programming (OOP) principles, the nature of React and the benefits of functional components make them a more natural fit:

Focus on UI, not Objects: React primarily deals with UI components, not complex object hierarchies often found in traditional OOP applications. Functional components excel at representing these UI components as functions of their inputs.
State Management: Libraries like Zustand, Redux and MobX handle complex application state, further diminishing the need for intricate state management within individual components, a common use case for OOP. TypeScript integrates well with these libraries for robust type safety in state management.

The Takeaway:

Class components in React and TypeScript haven’t entirely vanished, but their use cases have become more specific (like error boundaries). For the vast majority of React development today, functional components with Hooks reign supreme, offering a cleaner, more performant, and composable approach. So, the next time you embark on a React project, embrace the functional paradigm – the classes may be gone, but the future of React and TypeScript development is bright!