Picture of the author

Amit Khonde

Comparing React functional and Class Components

Comparing React functional and Class Components

Introduction

Today React is at version 17.0 and over 40% of developers choose to use React as their primary framework of development. This leads to solving the same problem in many ways. Each one of us is going to have different opinions about why we should solve a problem in a certain way. Recently I started learning React and encountered one such scenario. My dilemma was choosing between class and functional components for my personal project. This is why I started finding out what are the differences between them and what to prefer. This post summarises what I found on comparing functional and class components.

Syntax differences

The very obvious difference between functional and class components is the syntax. Functional components are nothing but JavaScript functions that return the JSX syntax markup. Class components on the other hand are the modern ES6 classes that extend React.component. Class components must have a render() method on them which renders the markup. Let us take a look at the examples to understand better.

1 2 3 4 5 6 7 8 // Functional component const Hello = props => { return ( <div> <p>Hello there! I am a functinal component</p> </div> ); };
1 2 3 4 5 6 7 8 9 10 11 12 import React from "react"; // Class Component class Hello extends React.Component { render() { return ( <div> <p>Hello there! I am a class component</p> </div> ); } };

Lifecycle methods

In today’s dynamic web page era, we constantly need to check if the web page is updated and what is updated on the web page. This is where lifecycle hooks come in. Lifecycle hooks provide us with a way to execute code when components render, re-render, or unmounts.

Earlier, functional components were just stateless components that take props and render JSX. So they did not stand any chance in this category. But with React hooks on hand, almost every lifecycle method is possible in functional components as well.

Let us look at some code on how to handle lifecycle events in functional and class components. Some of the key advantages with Functional components in this category are:

  • Fewer lines of code
  • Related logic like subscribing and unsubsribing (to APIs or other resources) can be kept together.
  • NO this BINDINGS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 // Lifecycle hooks in functional components import React, { useState, useEffect } from "react"; const Counter = () => { const [count, setCount] = useState(0); const [count2, setCount2] = useState(0); // componentDidUpdate useEffect(() => { console.log("Component Updated"); }, [count, count2]); // componentDidMount and componentWillUnmount useEffect(() => { console.log("Component mounted"); return () => { console.log("Component unmounted"); }; }, []); // return ( // <div> // </div> // ); }; export default Counter;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 // Lifecycle hooks in class components import React from "react"; class TestComponent extends React.Component { constructor(props) { super(props); this.state = { show: true }; console.log(`${props.name} constructor`); } componentDidMount() { console.log(`${this.props.name} Component mounted`); } componentDidUpdate() { console.log(`${this.props.name} Component updated`); } componentWillUnmount() { console.log(`${this.props.name} Component unmounting`); } /* render() { console.log(`${this.props.name} render`); return ( <div> </div> ); } */ }

Performance

Theoretically speaking, functional components are going to have upper hand performance. Because at the end of the day, they are plain JavaScript functions. I read some concerns over redeclaration of inner functions each time functional components are rendered. Although the concern is valid, I have never seen a performance problem because of redeclaring functions. My thought process here is to not solve the problems we do not have.

A developer wrote about measuring performance differences between functional and class components. The experiment includes rendering 1000 components of each type. You can check out the article here: https://itnext.io/react-component-class-vs-stateless-component-e3797c7d23ab and the experiment results here: https://jsfiddle.net/69z2wepo/136096/

Conclusion

Today, React as a framework is growing and in the recent future, we are going to see a lot of new things in both functional and class components. As for me, I prefer using functional components because of the syntax and power of hooks. Also, in my mind, I know that JavaScript is not a class-based language so I prefer functions over classes in a lot of situations. I would love to know what you folks prefer in your projects. Comment down your thoughts and preferences. Until then, Happy Coding!!

Share

Share on twitter
Share on facebook

Like what you are reading? Subscribe for new posts every week