Are class components obsolete after the introduction of React Hooks?
Updated: Jul 30, 2020
There was a lot of buzz regarding React Class components becoming obsolete after the introduction of React hooks in React 16. According to the creators of React, Hooks are meant to replace class components. However, in this blog let us analyze how practical it is to replace all functionalities of React class components using hooks.
Here are the three important features which separated React class components from functional components before the introduction of hooks.
State
Lifecycle Methods
Higher-order components
State:
Until the introduction of React Hooks, functional components were also called stateless components as they did not support the state. However now useState provides an easy implementation of state logic in the functional components.
Lifecycle methods:
React classes came with useful lifecycle functions like componentDidMount, componentDidUpdate, componentWillReceiveProps, componentWillUnmount etc. These lifecycle functions helped developers to define business logic to be executed at different stages of the lifecycle of a React component. These lifecycle functions cannot be accessed from within a functional component. However, the useEffect hook is intended to bring the functionality of lifecycle functions to functional components. The useEffect hook does a pretty good job of replacing most lifecycle functions, however, they cannot properly replace some lifecycle functions like componentWillReceiveProps. Even though componentWillReceiveProps is now deprecated, renamed to UNSAFE_componentWillReceiveProps and replaced with getDerivedStateFromProps, use effect hook cannot completely replace the same as useEffect cannot completely emulate the functionality of getDerivedStateFromProps without a wrapper logic in it written by the developer.
Higher Order Components:
A Higher-Order Component (HOC) is basically a React component that takes a component as input and returns another component. Higher-order components are highly useful when the same logic has to be shared with most or all components within an application. For example, Redux uses the HOC connect to integrate the store with React components.
One of the biggest cons of HOC’s is using a lot of props with lots of HOC’s can cause prop collisions. Prop collision is caused when multiple HOC’s try to pass the same prop to a component. This can be remedied using hooks. Hooks accomplishes this by passing the implicit dependency within the component. Prop collision is avoided as hook return values can be manually passed to any variable within a component and can be passed as a prop to the child component. This may solve the prop collision issue, but this can also spread the logic which is supposed to be self-contained in one HOC which should be reused throughout the application in many components.
Conclusion of our analysis:
React hooks can completely replace the state.
Hooks can replace most lifecycle functions, but not all. However, all functionalities can be emulated by writing custom logic on top of hooks by using custom hooks.
Hooks cannot completely replace HOC’s. In scenarios where the HOC will be used in one component, it can be replaced with Hooks, but HOC’s which are used throughout the application should not be replaced with hooks.
Even though the creators of React want developers to use class components less and use hooks more, the behavior of the developer community is mostly driven by convenience and performance, not what the creators want. The instances where the creators of a particular language or library have changed their recommendation based on developers' behavior is more than the instances where the change happened in the other direction. Hooks make functional components powerful, functional components are faster than class components, but it will take some time before class components become obsolete.