How to convert React components from class to functional with hooks (2023)

InResponder 16.8, the hooks are a completely new feature. They provide state and other capabilities of React without having to create classes.

With React 16.7, we can now turn class-based components into functional components using the new React Hooks. This allows us to take advantage of both types of components in one project, which is great! We no longer have to create separate files for each type of component and make sure we import them in the correct places; now everything is in one place. The only problem is that this may seem like a step backwards for some developers. Especially once you're comfortable writing your own custom hooks (eg using Recompose).

Why would you convert class components to hooked functional components?

If you've already started practicing React Hooks in your project, you're familiar with the benefits of using hooks. Hooks allow you to export and import only the components you need from a file instead of importing everything like you would with class-based components. This is advantageous for two reasons. First, it means that its components are reusable. You can import a component from one file and use it in another file if the component does not contain file-specific information, as is the case with class-based components. Second, it means that your file sizes will be smaller. Linked components only import what they need for a specific use case, keeping the file size smaller. Hooks are also easier to test due to the isolation of each component, whereas class-based components can make it difficult to test each component in a file.

Converting class-based components to functional components has some advantages:

• Easier to organize your code— You don't need to create a separate file for each type of component in your project; everything is in a single file, making it easy to navigate your code base.
• The code is easier to read.— You don't have to scroll through hundreds of lines of code to see what each component does because all your components are in one place.
• The code is easier to maintain.— If you decide to remove a component from your project, you only need to remove it in one place. With class-based components, you may need to review and remove the component from each file that uses it, which can be time consuming.
• coherent name— All your components will have the same name, which is easier when trying to read other people's code.
• Easier to remodel— If you decide to change how a component works, you only have to make the change in one place. For class-based components, you must make the change in each file that the component uses.

Converting class-based components to functional components also has some disadvantages.

• You must remember to add the export keyword in front of each component that you want to make a functional component or it will still be class based.
• You lose the ability to add states to your components, which are limited to the component you previously used.
• You have to remember to use separate event handlers, e.g. B. Event handlers without an "e" suffix, which is not necessary when using class components.
• You have to remember to export your React components if you want to use them with other React libraries, e.g. B. with React Native.

The necessary steps to consider before changing class-based components to functional components -

• Use a function instead of a class.
• Delete the constructor.
• Save the returns; Remove the render() method.
• Add const before all methods.
• Specify the component each time.
• Remove all occurrences of "this" in the component.
• Use useState to set the startup state.
• change this.
• setState() To update the state, call the function you named in the previous step.
• useEffect() should be used instead of componentDidMount and also with componentDidUpdate.

The detailed procedures are:

• Hooked functionality with React Hooks

Hooks takes the best parts of functional and class-based components and compiles them into a component type. Hooks for functional components are as follows:

• state of use: With functional components, we can create a state inside the component. However, it is not limited to the component, but to the entire file. With hooks we can create a state that is within the scope of the file. The state is accessible to all file components.
• Use React lifecycle methods: Hooked functional components also have access to lifecycle methods such as componentDidMount and componentDidUnmount . The only difference with these hooks is that they do not have the "e" suffix. So it would write "componentDidMount" and not "componentDidMount()".
• Confirm which hooks you need and wrap the class components along with useState, useEffect and useContext

You may be wondering which bindings to use when converting bound components from class-based to functional. You must import useState for each functional component that you want to convert. You must import useEffect for each functional component that you want to convert that has child effects, and you must import useContext for each functional component that has child effects and accesses data that is outside of the file.

You can insert these components into another component, e.g. a main component, to keep the file clean and organized.

• Convert a stateful component to a function with useState

Let's say we have a stateful component that has a specific value for a specific use case. For class-based components, we would create a function specific to that use case and add that function to the file as a class-based component.

With function components hooked in, we can do that, but with a function that is located in the file. We would add the function to the file as a mounted function component. This function would then be called when the hooked function component is used and the function would return the state that we want to use when the hooked function component is used.

In the attached functional component, we would import the function and it would appear in our file as a function that has "state" in the name, e.g. B. getState. The "state" at the end of the function name is important because it tells React that the function is returning state.

This means that we can replace the function with a variable or constant in our file and use that instead. The function can be used anywhere in the file, although depending on your use case, it may make more sense to place it in another function in the file.

• Convert a render-only component to a function with useRender

Let's say we have a component that is stateless and just needs to spawn a react element. For class-based components, we would create a function specific to that use case and add that function to the file as a class-based component.

With function components hooked in, we can do that, but with a function that is located in the file. This function would then be called when the attached function component is used, and the function would return a react element to represent the attached function component.

In the hooked function component, we would import the function and it would appear in our file as a function with "render" in the name, e.g. B. renderElement. The "render" at the end of the function name is important because it tells React that the function returns a React element.

This means that we can replace the function with an element, constant, or variable in our file and use that instead. The function can be used anywhere in the file, although depending on your use case, it may make more sense to place it in another function in the file.

Converting class-based components to functional components -

1. When there is no state or lifecycle method. —Consider the following class-based component code.

import React, {Components} of 'react';
class app extends component {
displayMessage = () => {
alert('You clicked a button.');
};
render() {
go back (
<div>
<h1>Stateless, non-lifecycle class component</h1>
<button onClick={this.showMessage}>
click on me
</button>
</div>
);
}
};
export default app;

When a button is clicked, this code simply tells the message that it was clicked. This should become a working component. The necessary steps that we have already seen above must be followed. Therefore, after completing the necessary processes, the functional components should be as follows:

import react from react;
function app() {
const showMessage= () => {
alert('You clicked a button.');
};
go back (
<div>
<h1>Functional component without state or life cycle.</h1>
<button onClick={showMessage}>
Click on me
</button>
</div>
);
};
export default app;

2.When there is state that exists in the class component. —Consider the following code for the class-based component that represents state.

import React, {Components} of 'react';
class app extends component {
state = {
News: ''
}
displayMessage = () => {
console.log (give.status.message);
};
manejarEntrada = e => {
this.setState({ Nachricht: e.target.value });
};
render() {
go back (
<div>
<h1>Stateful class component</h3>
<Enter
type="text"
onChange={this.handleInput}
value={this.message.status}
placeholder = "message"
/>
<button onClick={this.showMessage}>
Click here to register the message
</button>
</div>
);
}
}
export default app;

This class component logs the input message to the console when a button is clicked. To convert this too, the above conditions must be met. And after all the necessary formalities have been carried out, the functional component -

import react, { useState } of 'react';
function app() {
const [message, setMessage] = useState('hello');
const showMessage= () => {
console.log(Name);
};
const handleInput = e => {
setMessage(e.goal.value);
};
go back (
<div>
<h1>Functional component with state</h3>
<Enter
type="text"
onChange={controlarEntrada}
value={message}
placeholder="Enter message"
/>
<button onClick={showMessage}>
Click here to register the message
</button>
</div>
);
};
export default app;

3.When there are multiple states in the components of the class. —The class component has several state components. To do this, consider the following code.

import React, {Components} of 'react';
class app extends component {
state = {
Name: '',
He: '',
News: ''
};
displayMessage = () => {
console.log(this.state.name);
console.log(this.state.subject);
console.log (give.status.message);
};
manejarEntradaUsuario = e => {
this.setState({ e.target.name: e.target.value });
};
render() {
go back (
<div>
<h1>Multistate class component</h3>
<Enter
type="text"
onChange={this.handleUserInput}
name='name'
value={this.state.name}
placeholder = "Name"
/>
<Enter
type="text"
name='subject'
onChange={this.handleUserInput}
value={this.status.issue}
placeholder="Subject"
/>
<Enter
type="text"
name='message'
onChange={this.handleUserInput}
value={this.message.status}
placeholder="Enter message"
/>
<button
className="btn btn-top-right"
onClick={this.showMessage}
>
Print messages in the log
</button>
</div>
);
}
}
export default app;

The message is entered by the user and logged in the console by the code in the class mentioned above. Therefore, we must perform the same necessary procedures described above to transform this type of class-based component. Therefore, having taken the necessary measures, the functional element for it is:

import react, { useState } of 'react';
function app() {
const [name, setName] = useState('');
const [subject, setSubject] = useState(‘‘);
const [message, setMessage] = useState('');
const showMessage= () => {
console.log(Name);
console.log(subject);
console.log(message);
};
const handleUserInput = e => {
if(e.target.name === 'name')
setName(e.goal.value);
else if(e.target.name === 'Subject')
setSubject(e.goal.value);
else if(e.target.name === 'mensaje')
setMessage(e.goal.name);
};
go back (
<div>
<h1>Multi-state functional component</h3>
<Enter
type="text"
onChange={manageUserInput}
name='name'
value={name}
placeholder = "Name"
/>
<Enter
type="text"
name='subject'
onChange={manageUserInput}
value={subject}
placeholder="Subject"
/>
<Enter
type="text"
name='message'
onChange={manageUserInput}
value={message}
placeholder="Enter message"
/>
<button
className="btn btn-top-right"
onClick={show message}
>
Print messages in the log
</button>
</div>
);
};
export default app;

2.When we have the class-based component, we have componentDidMount() and componentDidUpdate() —Consider the following code for the class-based component.

import React, {Components} of 'react';
class app extends component {
state = {
headElement: „InterviewBit React Hooks Interviewfragen“
}
ComponentDidAssembly() {
const header = document.querySelectorAll('#headElement')[0];
setTimeout(() => {
header.innerHTML = this.state.header;
}, 3000);
}
ComponentesDidUpdate() {
const nodo = document.querySelectorAll('#headElement')[0];
node.innerHTML = this.state.header;
}
manejarEntradaUsuario = e => {
this.setState({headElement: e.target.value});
};
render() {
go back (
<div>
<h1 id="headElement">Class component with mount and update</h3>
<Enter
type="text"
onChange={this.handleUserInput}
value={this.state.header}
/>
</div>
);
}
}
export default app;

The Heading 1 code is updated with new text entered by the user via the class-based component mentioned above. ComponentDidMount() and ComponentDidUpdate() are used for this. Using the current UI state helps to update the state of the UI.

Therefore, the same techniques must be used to convert this class-based component into a functional component. Only the useEffect() hooks for componentDidMount() and componentDidUpdate() should be modified. Therefore, the last functional element will be -

import React, { useState, useEffect } from 'react';
function app() {
const [head, setHead] = useState('InterviewBit React Hooks Preguntas de entrevista');
useEffect(() => {
const newhead = document.querySelectorAll('#headElement')[0];
setTimeout(() => {
newheader.innerHTML = head;
}, 2000);
});
const handleUserInput = e => {
setHead(e.goal.value);
};
go back (
<div>
<h1 id="headElement">Functional component with useEffect</h1>
<Enter
type="text"
onChange={manageUserInput}
value={head}
/>
</div>
);
};
export default app;

💡And once you've turned your class components into functional components or custom hooks, you can isolate and extract them into packages so you can use an open source toolchain likeBitPublish, version and reuse all your projects with a simplenpm i @bit/your-username/your component. Know moreHere, YHere.

Diploma

Most of the React community is moving away from class-based components and towards function-based components. Role-based components offer a number of advantages over class-based components, which we've explored earlier in this article.

After several procedures that we have already covered in this article, the process of changing class-based components to function-based components begins. If you were asked these questions in your initial interview, perhaps that is why the interviewer has such a wonderful opinion of you. When preparing for the React Hooks interview, there are many other questions you need to address.Learn more.

Build apps with reusable components, like Lego

BitThe open source toolIt helps over 250,000 developers build apps with components.

It converts any user interface, feature or page into onereusable component– and share it with your apps. It's easier to collaborate and faster to build.

→Learn more

Break apps into components to simplify app development and get the best experience for the workflows you want:

→Micro-frontends

→design system

→Code sharing and reuse

→Monorepo

Learn more: