React JS: Functional and Class Components

This article covers the stateless and stateful components in React.

In developing a React app, you will encounter two different structures of a component. You may wonder what the difference between this two is, their pros and cons, and when is the best time to use them.

Functional Component

A functional component is simply a basic JavaScript function. It is one of the most common components you will encounter while working in React. Sometimes it is also called a stateless component as it lacks the state and lifecycle methods.

Code Structure

function App() {
  return (
    <p>Hello world!</p>
  );
}

This is the basic structure of a functional component. Upon generating your React app via npx create-react-app, this is the setup inside the src/App.js file.

const App = () => <p>Hello world!</p>

This is another structure of a functional component written in ES6.

Pros

The advantage of this component is that it is straightforward to read since the code is simple and is a fundamental JavaScript syntax. It is easier to test because you do not need to anticipate hidden states or side effects. It is easier to debug as it solely depends on the given props to produce an output. It is also more optimized compared to a class component.

Cons

The disadvantage of this component is its lack of state and lifecycle methods. So it has a very limited use case and is not recommended if you will have a dynamic page. You cannot fully utilize the React app’s potential and maximum performance.

Class Component

A class component is an ES6 class composed of multiple functions executed in the application. It is the bread and butter of most modern web apps built in React. Sometimes it is also called a stateful component as it has the core functions of a React app, the state and lifecycle methods.

Code Structure

import React from 'react';
class App extends React.Component {
  render() {
    return (
      <p>Hello world!</p>
    )
  }
}

This is the structure of a class component in React. Here you need to import React to be able to create a class extending from React.Component. And inside is a render function, where you will return the JSX.

Pros

The advantage of this component is the maximum app performance and interactivity. The full potential of a React app is put to use. This is also the key to why most React web apps are convenient and enjoyed by end users.

Cons

The disadvantage of this component is that it has more complex and lengthy source code, is more challenging to test and debug, and is slower than the functional component.

Conclusion

Both of these components have their unique and specific use cases. In summary, if your page is more of a static one, use the functional or stateless component. If your page is more of a dynamic one, use the class or stateful component.

Now that you are enlightened about the difference between functional and class components, this will help you decide wisely on what specific component to use on every page you make in your React app.

Learn more about SparkLearn EdTech from the following links:

MOOC: lrn.ac
Twitter: lrn.ac/twitter
Facebook: lrn.ac/facebook
GitHub: lrn.ac/github
Instagram: lrn.ac/instagram
LinkedIn: lrn.ac/linkedin
YouTube: lrn.ac/youtube