Previously, in the world of React, we had to use Classes in order to create components. Since version 16.8, a new way of creating components was added: Hooks. This might lead us to some questions: What is the difference between Hooks and Classes? Which one should we use? Keep reading to know the answers!
Intro
Before we start discussing what is the difference between Hooks and Classes and which one should we use, we must first see some concepts that will help us to understand better the components in React.
State
The state is simply an object that contains key-value pairs. It determines how components behave and allows components to be dynamic and interactive.
Components
A React component is a visual software element that has its own state and properties and implements its own rendering logic. React allows you to define components as classes or functions.
Components as classes
Class components (also called stateful components) maintain and update a state. The render method can call either props and states. Stateful components must contain the state object and can contain event-handling functions, as well as user actions.
There are three types of stateful components:
- Regular components
- Pure components
- High order components
Components as functions
Components as functions (functional components) are composed of a function that takes props and returns JSX. They do not have a state nor lifecycle methods. And, functional components are easier to read, debug, and test.
There are two types of functional components:
- Stateless components
- Hooks components
By the way, a React Hook component is the only functional component that can have a state.
So, now that we have the context of what kind of components and classes exist, let's dig a little bit deeper!
Components as classes in action
Class component is a feature-rich way to define a React Component. It also acts as a function that receives props, but that function also allows a private internal state as additional input that controls the returned JSX. Stateful components are the only type of components that have a series of lifecycle methods that execute automatically according to the status of the component.
The lifecycle of a component
The lifecycle of a component is composed of the mounting, updating, and unmounting steps. It is important to know that each step has its own functions to run depending on the lifecycle of your component.
Mounting: adding nodes to the DOM.
Updating: making changes to nodes that are already in the DOM.
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
Unmounting: removing the component from the DOM.
The following code is an example of a regular class component with the functionality of a counter using the lifecycle functions of React.
Components as functions in action
React Hooks allow you to use the state and other features of a stateful component without writing a class.
There are several types of React Hooks components, such as effect, state, and custom. Also, React Hooks names must always start with the word “use” (including custom Hooks).
Components and Hooks are functions, so React Hooks do not introduce any new elements.
Effect Hook
The effect Hook is used through the useEffect method. This hook is equivalent to componentDidMount, componentDidUpdate and
componentWillUnmount
combined. Depending on the second parameter of the useEffect function is the type of functionality that is achieved.
State Hook
The state Hook is used to declare a “State variable”. The useState method is a new way to use exactly the same functions this.state gives us in a class. It returns a pair of values, the current status, and a function that updates the status. That's why we write const [count, setCount] = useState(). This is similar to this.state.count and this.setState
This is an example of a Hook Component with the functionality of a counter using React Hooks.
Custom Hooks
A Custom Hook allows you to extract some of the component´s logic, and create with it a reusable function. We are just refactoring our code into another function to make it reusable.
This is an example of how to use a Custom Hook to handle the value and the onChange function of an input. Here we need to use the useState Hook to save the attribute that we are going to handle.
To use the created Hook we have to import the file and assign it any value. It will return an object with the value and the onChange function that we are going to use in the input.
Conclusion
Both classes and functional ways are good options when creating components. On the one hand, Hooks have cleaner but less understandable code. On the other hand, Clases have more code, but it is better-structured. If you want to have more control while writing code, Hooks allow you to create your own Custom Hooks (more code will be recycled). Remember, either option is good, but it all depends on your programming habits.
Which one do you prefer? Have you had a problem with any of these?
Let us know your experience with some comments!
