Bookbrainz has been using both functional and class components. A lot of it is legacy code which has been carried forward with releases while functional components didn’t become main stream till react 16.8.0 introduced Hooks. This made functional components, a powerful alternative to class components, with the ability to manage state and lifecycle events.
I wanted to have a discussion if migrating to functional components from class components would be worth it considering cost vs performance.
Benefits of functional components:
-
Improved performance: Functional components are faster than class components, because they do not have the overhead of a class instance. This means that your React app will be more responsive and performant, particularly for complex or large components.
-
Simplified code: Functional components are more concise and readable than class components. They eliminate the need for boilerplate code, such as the constructor and the render method. This makes it easier to understand and modify the code, and can reduce the likelihood of bugs.
-
Easier testing: Functional components are easier to test than class components. Because they are stateless and do not have lifecycle methods, they can be tested in isolation without needing to mock out complex behavior. This makes it easier to write comprehensive tests and catch bugs before they make it to production.
-
Improved maintainability: Functional components are easier to maintain than class components. Because they are more concise and readable, it is easier to understand how they work and what they do. This makes it easier to modify and extend the codebase as your app evolves over time.
-
Better compatibility: Functional components are more compatible with React hooks, which are becoming increasingly popular in the React community. By converting your class components to functional components, you can take advantage of hooks to simplify your code and improve its performance.
I am able to identify around 36 files which are using class based components