Skip to content

ADR‐001 class or functional components

Jump to bottom
Yaroslav Kravtsov edited this page Nov 5, 2023 · 2 revisions

ADR: Choosing Between Class and Functional Components for Our Static Website Using React

Context and Problem Statement

In the development of our static website using React, we need to make a decision regarding whether to use class components or functional components. React offers both class and functional components for building user interfaces, and we need to determine which one to use for our project. This decision will impact the maintainability, performance, and development experience of our website.

Decision Drivers

  • Ease of development and code maintainability
  • Performance and efficiency
  • Industry best practices
  • Team familiarity and expertise with React

Considered Options

  1. Class Components: Using class-based components for building our static website.
  2. Functional Components: Using functional components with hooks for building our static website.

Decision Outcome

Chosen option: "Functional Components", because they are the modern and recommended way of building React applications. They offer a more concise and readable syntax, better performance optimizations, and are in line with industry best practices. Additionally, functional components with hooks have become the standard approach for React development.

Positive Consequences

  • Improved code maintainability and readability.
  • Better performance and optimization opportunities.
  • Aligns with industry best practices and the current state of React development.
  • Encourages the use of hooks, which simplifies state management.

Negative Consequences

  • Developers who are more familiar with class components may need some time to adapt to functional components.
  • Functional components don't mean using Functional Programming, because functional components in React violate FP principles (pure functions and presence of side effects)

Pros and Cons of the Options

Class Components

  • Good, because they are well-established and have been used for a long time.
  • Good, because some legacy code or third-party libraries may still use class components.
  • Good, because class components allow developers to write code in OOP style
  • Bad, because they have a more verbose syntax.
  • Bad, because they don't encourage the use of hooks and the latest React features.
  • Bad, because developers familiar with functional components may need some time to adapt.

Functional Components

  • Good, because they are the modern and recommended approach.
  • Good, because they provide a more concise and readable syntax.
  • Good, because they encourage the use of hooks for state management.
  • Bad, because for huge projects it will be hard to maintain, customize and refactor codebase

Links

Clone this wiki locally