Analytics Vidhya
Published in

Analytics Vidhya

React Components: Functional vs Class

React components are independent and reusable code blocks that return a React element. Functional Components and Class Components are two main types of components in React:

  1. Functional Components: They are basic functions that accept props as an argument and return JSX code instead of using a render() method. Functional components can be declared by both JavaScript functions and arrow functions. You will need to explicitly write props as the argument and you do not need to extend Component to work with functional components.
<RecipeList> functional component creates <li> elements.

Functional components are also known as stateless components because they do not store state and they lack lifecycle methods and instances. Functional components can also be written as a single line with ES6:

It takes up less lines of code to write down the same <RecipeList> functional component with ES6.

Functional components are easier to write, read, understand, test and debug. They are mostly used to display content without any heavy logic, but they can be more complex if you want to use helper functions and React Hooks (version 16.8). Functional components should be favored until unless you need state and lifecycle methods, which are easily available to class components.

2. Class Components: In React, the components can also be declared as classes. As its name suggests, class components are created using the ES6 class syntax and they differ from functional components in several ways. First of all, class components need to be extended from a Component class, which gives access to all the functions of the parent component. Second, they require a render() method to return a React element (JSX code).

In addition to render() method, we can add also Lifecycle methods inside class components. Class components are also known as stateful components because they take constructor function, where they can accept props and maintain their own data with state. Lastly, you can have access to props with this.props because class components have instances.

Note that the componentDidMount() lifecycle method is used inside <RecipeContainer> class component.

In summary, functional components are concise and easier to understand and maintain. They are good options for simple components, but they lack certain features. On the other hand, class components implement logic and they are more complex than functional components by including state, Component class, constructors, lifecycle and render() methods. It is suggested to start with a functional component unless you need state and lifecycle methods because functional components can not perform these additions unless React Hooks is used.

--

--

--

Analytics Vidhya is a community of Analytics and Data Science professionals. We are building the next-gen data science ecosystem https://www.analyticsvidhya.com

Recommended from Medium

First time using ActiveRecord and Sinatra

Blazor Server Project #5: Creating and Using Page Layout

LeetCode 237. Delete Node in a Linked List

Getting started backend development with KoaJS and REST API’s.

How to Create Paging Links in JavaScript

What is “this” in JS #3

Do you know string & array prototype Javascript?

Rails 6 Sharing CanCanCan Abilities In Vue Components

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bahay Gulle Bilgi

Bahay Gulle Bilgi

Full-Stack Software Developer with a background in academia. Seattle, WA. https://www.linkedin.com/in/bahay-gulle-bilgi https://www.bahaygb.com

More from Medium

The difference between state and props in React

A computer screen with a React symbol on it.

How to abstract logic with React Hooks?

Class-Based vs Function-Based Components in React (useState) for Beginners

Understanding React Class Components lifecycle methods