ReactJS: what is the difference between a functional component and a class component

Question

Can someone explain in detail the difference between a functional component and a class component in ReactJS?

When do we use a functional component and when do we use a class component?

Answer 1

Here is Dan Abramov’s excellent article , Presentation and Container Components , that can help you with this.

But the troll as I understand it:

1. You will have to use class CreatePostForm extends Component {} or React.createClass() if:

   • you need access to the life cycle methods of your component (i.e.: componentWillMount or componentDidMount) - NOTE. Starting with React 16.8 , this is no longer necessarily true, and I highly recommend reading on React Hooks, as they can simplify things as soon as you get comfortable with them;
   • your component has direct access to your store and thus retains state (some people also call this type of component, smart component or container).

2. When your component simply receives the details and displays them on the page, then you have a “stateless component” (some people call these components stupid components or presentation components) and you can use a pure function to represent it, and it can be that simple. like this

   import React from 'react'; export default() => <p>Hello from React!</p>;

Now it’s important to remember that a pure function can become much more complex than this, and if you are familiar with some ESNext syntax and attributes of destructuring and distribution, you can have a presentation component that looks like this:

 import React from 'react'; import AnotherComponent from './AnotherComponent'; export default ({ children, ...rest }) => <AnotherComponent extraProp="anExtraProp" { ...rest }> { children } </AnotherComponent>; 

Hope this helps.

Answer 2

Functional Inactive Components (the middle word you missed is important) is just a dumb function that takes props as input and displays markup. They have no condition or methods or anything like that. Just (props) => { return <span>props.foo</span>; } (props) => { return <span>props.foo</span>; }

Class components can have state, variables, methods, etc.

Answer 3

See this picture. I'm too late, but I will help others.

Image Source - Udemy Course

Answer 4

Functional component : use a simple JavaScript function to define the component. it uses details as input (without saving state)

Class component : using a class to define a component (component state)

Answer 5

Besides the obvious syntax difference, you need to use a class component instead of a function component when your component needs to store and manipulate its own internal state or when you need access to several life cycle methods such as componentDidMount , etc., to perform network operations , manipulate the DOM, interact with third-party libraries, etc.

I recommend that you check out the React documentation ( https://reactjs.org/docs/react-component.html ) about the React.Component API to find a detailed description of all lifecycle methods and state APIs.

Answer 6

Functional components:

1. These components are stateless components and do not have reactive life cycle methods.
2. These components can be used for presentation purposes.
3. These components can be easily debugged, tested.

Class Components:

1. These components are full state components and can support reaction life cycle methods that extend the reaction components.
2. These components can be used when you want to create state methods for a component.

Answer 7

Functional (stateless) components

A functional component is essentially a JavaScript function that returns a React element. It takes the details as an argument and returns a valid JSX

Class components (with state)

Class components are more complex than functional components, including constructors, life cycle methods, the render () function, and state (data) management. Class components are ES6 classes.

Benefits of Using Functional Components

1. Functional components are easy to test.
2. This may have better performance.
3. Functional components are easily debugged.
4. As a result, less code.
5. This will help you use best practices.
6. Functional components can reduce grip.

For more click here.