Functional Component vs Class Component in React.Js

What is React Js: 

React.js is a JavaScript library for building user interfaces. It was developed by Facebook and is now maintained by a community of developers. React allows developers to build reusable UI components, which can be easily composed to create complex user interfaces.

React uses a virtual DOM (Document Object Model) to update the UI efficiently. The virtual DOM is a lightweight representation of the actual DOM, which React uses to calculate the changes that need to be made to the actual DOM. This approach improves the performance of applications built with React, as it avoids unnecessary updates and re-renders of the entire UI.

A component in React is a JavaScript function or class that returns a React element. A React element is an object that describes a part of the UI. A component can also have a state, which is an object that holds the data that the component needs to render.

 

Functional Component:

A functional component in React is a JavaScript function that returns a React element, which is an object that describes a part of the UI. Functional components are also known as “stateless” components because they do not have a state. They only receive props as input and return a JSX element that describes the UI. They are simple, easy to understand, and often used for presentational components.

Here’s an example of a functional component:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

In this example, the Welcome component is a function that takes a single prop, “name”, and returns a JSX element that displays a greeting message. The component is stateless because it doesn’t have any state that it needs to keep track of.

Functional components are simpler and easier to understand than class components, and they don’t have this keyword. They are also generally easier to test, as they are just plain JavaScript functions.

In recent versions of React, functional components can also use hooks, which allow them to have state and lifecycle methods similar to class components. With hooks, you can also use the state and other features from React in the functional components.

In summary, functional components in React are JavaScript functions that return React elements, they are stateless and easy to understand, they are often used for presentational components, and can use Hooks to add state and other features.

 

Class Component: 

A class component in React is a JavaScript class that extends React.Component class. It has a state, which can be used to store the data that the component needs to render. They also have lifecycle methods, which allow them to control when a component is added to or removed from the DOM, and to perform other tasks at specific points in the component’s lifecycle. They are often used for container components, which handle the state and logic of the application.

Here’s an example of a class component:

class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

When and Why: 

When deciding whether to use a functional component or a class component, you should consider whether the component needs to have state or lifecycle methods. If it does, then a class component is the better choice. If it doesn’t, then a functional component is usually the simpler and easier to understand option.