Understanding Functional Component and Class Component in React

Functional Component and Class Component :

Functional Component and Class Component are both used to create React components. They each have their own advantages and disadvantages.

Functional components are typically used for simple UI components that don’t require state or lifecycle methods. They are easy to write and test, and can be memorized to improve performance.

Class components are typically used for more complex UI components that need state or lifecycle methods. They are more difficult to write and test, but can be more performant.

Mainly Two components in Reacts are:

• Functional Component or Stateless Component
• Class Component or Stateful Component

Simply Functional Components are functions and Class Components are classes. The main difference between the Functional Component and Class Component is that the Functional Component does not have a state while Class Component has a state. The basic rule is that the first letter is capitalized while we write components’ names in React. This rule is applied to both functional and class components.

Also Read : A Stateful and Stateless Components in React

Functional Component

• There is no render() method used.
• It’s readable code. It is easy to understand.
• Simply accept the data and display it in some form.

Simple Function Based Component Syntax

function App() {
  return <div>It is Functional Component</div>;
}
export default App;

Passing props to a Functional Component

import React from "react";
 
const PropsExample = (props) => {
  return (
    <div>
      <p>Passing Props in Functional Component</p>
      <h4>Taking Props: {props.value}</h4>
    </div>
  );
};
 
function App() {
  return <PropsExample value={"Passing the value"} />;
}
export default App;

Class Component

• It must have a render() method. If it does not have a render() method, it is not a Class Component
• The class components can use React lifecycle methods. The lifecycle methods are: componentDidMount, componentsDidUpdate, componentWillUnmount.
• You pass props down to class components and access them with this.props
• It must have a constructor method.

We can write the code inside the app.js file. The app.js file is the main file that contains all the JavaScript code that is necessary to run the React application.

Let’s take a quick look at the following code:

Simple Class Based Component Syntax:

import React from "react";
 
class App extends React.Component {
  render() {
    return <div>It is Class Component</div>;
  }
}
 
export default App;

Passing props to a Class Component

import React from "react";
 
class PropsExample extends React.Component {
  render() {
    return (
      <div>
        <p>Passing Props in Class Component</p>
        <h4>Taking Props: {this.props.value}</h4>
      </div>
    );
  }
}
 
class App extends React.Component {
  render() {
    return <PropsExample value={"Passing the value"} />;
  }
}
 
export default App;

We can create a functional component with the arrow functions and regular function keywords. It works the same whatever you like, you can use it. Functional components are easy and readable code. I recommend using arrow functions because they let you write less code.