Migrating from Class Components to Functional Components in React
Last Updated : 15 Mar, 2024
React version 16.8.0 or higher allows users to write the functional components without the use of class components. Using class components, we need to write the whole class to interact with the state and lifecycle of the component. The code was quite complex and harder to understand which led to lower performance and limited usability.
With the help of functional components, it has become easier to manage the state and lifecycle of a component. We don't need to define any class. Directly declare the components and use them wherever required. The code is quite simple, easy to understand, reusable, and manageable.
The State Management in React using class and functional component
Class Component state: setState:
To add a state to a class component using the setState, initialize the state in the constructor and declare the methods with the class itself. To set the state we need to create an additional function defining the update that is to be done in the state.
Example: Below is an example of class component state.
JavaScript import React from 'react'; class Gfgarticle extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; this.increment = this.increment.bind(this); } increment() { this.setState({ count: this.state.count + 1 }); } render() { return ( <div> <h1>Counter Program</h1> <p>You clicked {this.state.count} times</p> <button onClick={this.increment}>Increment</button> </div> ); } } export default Gfgarticle; Functional component state: useState
While using the useState as a Functional Component, initialize the state with some initial value and declare the function which whenever called helps to make updating the state.
Example: Below is an example of functional component state.
JavaScript import React, { useState } from "react"; function Gfgarticle() { // Here is a react Hook const [count, setCount] = useState(0); return ( <div> <h1>COUNTER PROGRAM</h1> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Increment </button> </div> ) } export default Gfgarticle; Now let's have a check on the lifecycle in react using both the class and functional component
The Lifecycle in React using class and functional component
Class Component LifeCycle
The Lifecycle of a class component required declaration of several sets of methods which includes componentDidMount, componentDidUpdate, componentWillUnmount, etc.
Example: Below is an example of class component lifecycle.
JavaScript import React from 'react'; class Gfgarticle extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; this.increment = this.increment.bind(this); } static getDerivedStateFromProps(props, state) { console.log('getDerivedStateFromProps called', props, state); return null; } componentDidMount() { console.log('componentDidMount called'); } shouldComponentUpdate(nextProps, nextState) { console.log('shouldComponentUpdate called', nextProps, nextState); return true; } getSnapshotBeforeUpdate(prevProps, prevState) { console.log('getSnapshotBeforeUpdate called', prevProps, prevState); return null; } componentDidUpdate(prevProps, prevState, snapshot) { console.log('componentDidUpdate called', prevProps, prevState, snapshot); } componentWillUnmount() { console.log('componentWillUnmount called'); } handleClick = () => { this.setState(prevState => ({ count: prevState.count + 1 })); }; increment() { this.setState({ count: this.state.count + 1 }); } render() { return ( <div> <h1>Counter Program</h1> <p>You clicked {this.state.count} times</p> <button onClick={this.handleClick}>Increment</button> </div> ); } } export default Gfgarticle; You can observe the lifecycle method calls in the console as you interact with the component, helping you understand the sequence of events during the component's lifecycle.
Here is the result of the above code
Functional Component LifeCycle
In the functional component, we simply use the useEffect hook to keep a track of the side effects and perform the cleanup tasks.
The same above lifecycle event using functional component is given as below:
JavaScript import React, { useState, useEffect } from "react"; function Gfgarticle() { // Here is a react Hook const [count, setCount] = useState(0); useEffect(() => { console.log('Component mounted'); return () => { console.log('Component will unmount'); }; }, []); useEffect(() => { console.log('Count updated:', count); }, [count]); const handleClick = () => { setCount(prevCount => prevCount + 1); }; return ( <div> <p>You clicked {count} times</p> <button onClick={handleClick}> Increment </button> </div> ) } export default Gfgarticle; The life cycle using the functional component can easily be seen in the console.
Here is the result of the above code
Conclusion:
In conclusion, while class components have been a cornerstone of React development for many years, they come with certain drawbacks, including complexity, limited reusability, and potential performance overhead. With the introduction of hooks in React, functional components have become the preferred way to define components, offering a simpler, more declarative, and more efficient approach to building React applications.
Similar Reads
How to convert functional component to class component in ReactJS ?
ReactJS offers two primary ways of creating components: functional components and class components. While functional components are more concise and easier to reason about, there are situations where class components may be necessary with the flexibility to use lifecycle methods and manage the state
2 min read
How to Call Parent Components's Function from Child Component in React ?
In React, it is very important to manage communication between components for building flexible and maintainable applications. Sometime, you need to trigger a function defined in a parent component from a child component. In this article, we'll see how to achieve this in React by passing down functi
3 min read
Why it is Recommended to use Functional Components over Class Components ?
In this article, we will learn about the use of the functional component over the class component. In React JS, there are two main types of components: Functional Components Class Components.Functional Components are JavaScript functions that take in props as an argument and return a React element
4 min read
When to use a Class Component over a Function Component in ReactJS?
ReactJS provides two main ways to create components: Class Components and Function Components. With the introduction of React Hooks in version 16.8, Function Components became more powerful and are now commonly preferred. However, there are still scenarios where Class Components might be a better ch
3 min read
How to create a Functional Component in React?
To create a functional component in React, you define a JavaScript function that returns JSX. These components are stateless and rely on props for data input. Functional components are concise, easy to read, and can utilize React Hooks for managing state and side effects, making them a fundamental b
2 min read
How to create Functional Components in React ?
To create a functional component in React, you define a JavaScript function that returns JSX. These components are stateless and rely on props for data input. Functional components are concise, easy to read, and can utilize React Hooks for managing state and side effects, making them a fundamental b
2 min read
How does a pure component differ from a functional component?
React provides two main types of components: pure components and functional components. Understanding the differences between these two types is important for effective React development. In this article, we will learn about pure components and functional components, along with discussing the signif
4 min read
Differences Between Functional Components and Class Components
In React, components are the building blocks of the user interface, and you can define them in two ways: Functional Components and Class Components. Both are used to build UI elements, but they differ in syntax, but they differ in syntax, state management, lifecycle methods, and other features. With
4 min read
What is a pure functional component in ReactJS ?
What is a JavaScript function? A JavaScript function is a block of code designed to perform a particular task which is executed when it is called. How React functional components are similar to JavaScript functions? Conceptually, components are like JavaScript functions. Â A functional component is a
3 min read
React JS Component Composition and Nested Components
React JS Component Composition allows you to build complex UIs by combining smaller, reusable components. Nested Components refer to components that are used within other components, enabling a modular and structured approach to building React applications. Table of Content Component CompositionNest
3 min read