In this article, we will discuss, class components in React, their uses, benefits and disadvantages. We will also learn how to create class components along with their lifecycle methods.
Class components in React
React class components are the bread and butter of most modern web apps built in ReactJS. These components are simple classes (made up of multiple functions that add functionality to the application). All class components are child classes for the Component class of ReactJS.
Creating class Components
We will learn how to create class components with the help of an example
Example: Program to demonstrate the creation of class components. Create a React app and edit the App.js as:
Filename- App.js:
javascript
import React from "react"; class App extends React.Component { render() { return <h1>GeeksForGeeks</h1>; } } export default App; |
Output:
Once a component is declared, it can be used in other components. Program to demonstrate the use of class components in other components.
Example: Open the App.js file and replace the code with the below code.
javascript
import React from "react"; class Sample extends React.Component { render() { return <h1>A Computer Science Portal For Geeks</h1>; } } class App extends React.Component { render() { return <Sample />; } } export default App; |
Output:
Advantages of class Components over Functional Components
The main feature of class components that distinguished them from functional components is that they have access to a state which dictates the current behavior and appearance of the component (Later, with React Hooks introduced in version 16.8, we are able to declare a stateful component without declaring a class). This state can be modified by calling the setState() function. One or more variables, arrays, or objects defined as part of the state can be modified at a time with the setState() function.
Implementing state in class components
let us understand how to use state in class components with the help of an example
Example: Program to demonstrate the use of state in class components. Open the App.js file and replace the code with the below code.
javascript
import React from "react"; class App extends React.Component { constructor(props) { super(props); this.state = { change: true }; } render() { return ( <div> <button onClick={() => { this.setState({ change: !this.state.change }); }} > Click Here! </button> {this.state.change ? ( <h1>Welcome to neveropen</h1> ) : ( <h1>A Computer Science Portal for Geeks</h1> )} </div> ); } } export default App; |
Output:
Passing props in class components
Data is passed to other components with the help of props. Props work similarly for all components in ReactJS be they class or functional. Props are always passed down from the parent component to the child component. ReactJS does not allow a component to modify its own props as a rule. The only way to modify the props is to change the props being passed from the parent component to the child component. This is generally done by passing a reference to a function in the parent component, which changes the props being passed to the child component.
Example: Program to demonstrate the use of props in class components. Open the App.js file and replace the code with the below code.
javascript
import React from "react"; class App extends React.Component { render() { return <h1>{this.props.data}</h1>; } } class propsExample extends React.Component { constructor(props) { super(props); this.state = { change: true }; } render() { return ( <div> <button onClick={() => { this.setState({ change: !this.state.change }); }} > Click Here! </button> {this.state.change ? ( <Pass data="Welcome to neveropen" /> ) : ( <Pass data="A Computer Science Portal for Geeks" /> )} </div> ); } } export default App; |
Output:
Lifecycle methods in class components
Class components have access to the lifecycle functions like componentWillMount(), componentDidMount(),componentWillReceiveProps(),componentWillUpdate(), shouldComponentUpdate(),render() and componentWillUnmount();. These lifecycle functions are called at different stages of the lifecycle and are used for a variety of purposes like changing the state or doing some work (like fetching data from an external API). They are also referred to as lifecycle hooks.
Example: Program to demonstrate the use of lifecycle hooks. Open the App.js file and replace the code with the below code.
javascript
import React from "react"; class App extends React.Component { constructor(props) { super(props); this.state = { text: "Welcome!" }; } componentWillMount() { this.setState({ text: "neveropen", }); } render() { return <h1>{this.state.text}</h1>; } } export default App; |
Output:
Disadvantages of using class components
Class components are slightly slower than their functional counterparts. The difference is very small and is almost negligible for smaller web apps – though the performance difference increases when the number of components in the app increases. Moreover, class components involve a lot more coding on the programmer’s part, making them slightly more inefficient to use.
