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

Question

Could anyone can explain in detail the difference between functional component and class component in ReactJS?

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

Answer 1

Here's a great article, "Presentational and Container Components", by Dan Abramov that can help you with that.

And here's a tl;dr; of the way I understand this:

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

   • you need access to your component's lifecycle methods (ie.: componentWillMount or componentDidMount) – NOTE: Since React 16.8, this is no longer necessarily true and I would highly recommend reading on React Hooks as they can make things simpler once you get comfortable with them;
   • your component have direct access to your store and thus holds state (some people also call these components: smart components or containers).

2. When your component just receive props and render them to the page, then you have a 'stateless component' (some people call these components dumb components or presentational components) and can use a pure function to represent it and it can be as simple as this

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

Now, it's important to remember that a pure function can get way more complex than this and if you're comfortable with some ESNext syntax and destructuring and spreading attributes, you can have a presentational 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

See this picture. I am too much late but i will help the others.

Source of Image is Udemy Course

Answer 3

Functional Stateless Components (that middle word you missed is the important one) are just a 'dumb' function that takes props as an input and outputs markup. They don't have any state or methods or anything like that. Just (props) => { return <span>props.foo</span>; }

Class components can have state, variables, methods etc.

Answer 4

Functional Components:

1. These components are stateless components and does not have react life-cycle methods.
2. These components can be used for presentation purpose.
3. These components can be easy to debug,test.

Class Components:

1. These components are statefull components and can support react life-cycle methods by extending react components.
2. These components can be used when you want to create methods , state for an component.

Answer 5

Functional Components

A functional component is basically a JavaScript function which returns a React element. Its accepts props as argument and returns valid JSX

Class Components

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

Benefits of using Functional Components

1. Functional components are easy to test.
2. It can have better performance.
3. Functional components are easy to debug.
4. It end up with less code.
5. It help you to use best practices.
6. Functional components can reduce coupling.

For more click here

Answer 6

Functional Component : Using simple javascript function to define component. it uses props as input(stateless)

Class Component : Using class to define a component(state Component)

Answer 7

Besides the obvious difference in the syntax, you need 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 the several lifecycle methods like componentDidMount, etc to perform network operations, manipulate the DOM, interact with third-party libraries, etc

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

Answer 8

1-Functional component are much easier to read and test because they are plain JavaScript functions without state or lifecycle-hooks

2-You end up with less code

3-They help you to use best practices. It will get easier to separate container and presentational components because you need to think more about your component’s state if you don’t have access to setState() in your component

4-The React team mentioned that there may be a performance boost for functional component in future React versions

Answer 9

In the world of react there are two ways to write components where one uses a function and the other uses a class. Following example shows the two ways you can write the same component

Functional component

import React from "react";
function FunctionalComponent() {
 return <h1>Hello, world</h1>;
}

Class component

import React, { Component } from "react";

class ClassComponent extends Component {
 render() {
   return <h1>Hello, world</h1>;
 }
}

With Recent releases of React the choice to when to write when depends on the developer preferences.There are pros and cons in both styles but functional components are taking over modern React in the foreseeable future. Since everything we can do with class components are also possible with the functional components now a days also it can be written shorter and simpler, which makes it easier to develop, understand, and test

React team is supporting more React hooks for functional components that replace or even improve upon class components. They mentioned in prior releases that they will make performance optimizations in functional components by avoiding unnecessary checks and memory allocations. And as promising as it sounds, new hooks are recently introduced for functional components such as useState or useEffect while also promising that they are not going to obsolete class components but recommend a gradual adoption strategy.

Answer 10

1. When react was introduced, only class components were used to re-render the component when state changes and functional components were treated as presentational components as they don't have state access.

2. From react 16.8 version update, with introduction to hooks, now functional components also have state access.

3. In the class component, managing state is performed in a single state object but in function we can create as many hooks as we want.

4. In the class component, when re-render happens, it will invoke methods but in functional components when state update, it re-create and invoke inner functions if we don't use useCallback and useMemo hooks.

5. Only Class components are used as Error Boundaries

Answer 11

Function component is a Hook Using work and the usestate and any other hook function to use and dynamic data display then some problem for function component in a reactjs

Class Component is an easy way to use for compare to function component and daynamic data update then to easily work. Class component is what state and props use to pass runtime data to a component.