Functional components vs Class components in react native

Lately, I’ve been hearing a lot about functional components, some even asked me, “why are you still using class components?”
This made me curious whether am I missing something, so as usual I started getting my hands dirty, went through a couple of blogs, tested out couple of cases, tried it out myself and here I am.

Before we move forward just to set context, the easiest way you could increase the performance of a react-native app is to reduce the number of re-renders. The performance of a react-native app is inversely proportional to number of re-renders.

I built a basic UI to test out the features -

Class Component —

import React from 'react';
import {View, Text, Button} from 'react-native';
import PropTypes from 'prop-types';
import Styles from './styles';
export default class ClassComponent extends React.PureComponent {
static propTypes = {};
constructor(props) {
  super(props);
  console.log('constructor');
  this.renderCount = 0;
  this.state = {
    num1: 0,
    num2: 0,
  };
  this.updateState = this._updateState.bind(this);
}
_updateState() {
   this.setState(prevState => {
    return {
      num1: prevState.num1 + 1,
      num2: prevState.num2 + 1,
    };
   });
}
render() {
  this.renderCount += 1;
  console.log('this.renderCount',this.renderCount, this.state.num1,   this.state.num2 );
  return (
     <View style={[Styles.componentContainer,  {backgroundColor:'skyblue'}]}>
      <Text>Class Component</Text>
      <Button title={'updateState'} onPress={this.updateState} />
     </View>
  );
}
}

Functional Component —

import React, {useState} from 'react';
import {View, Text, Button} from 'react-native';
import PropTypes from 'prop-types';
import Styles from './styles';
let renderCount = 0;
const FunctionalComponent = () => {
const [num1, setnum1] = useState(0);
const [num2, setnum2] = useState(0);
function updateState() {
  setnum1(num1 + 1);
  setnum2(num2 + 1);
}
renderCount += 1;
console.log('renderCount functional component', renderCount, num1, num2);
return (
  <View style={Styles.componentContainer}>
    <Text>Functional Component</Text>
    <Button title={'updateState'} onPress={updateState} />
  </View>
);
};
export default FunctionalComponent;

So when I clicked on the button updateState, it basically logs that how many times the component renders.

This looks amazing, it basically renders simultaneously just like class components, but wait, when do we ever update the state without a network call?

So, I updated the updateState function as follows in functional component

async function updateState() {
  Promise.resolve().then(() => {
    setnum1(num1 + 1);
    setnum2(num2 + 1);
  });
}

and as follows in class component to simulate a network request.

Promise.resolve().then(() => {
  this.setState(prevState => {
    return {
     num1: prevState.num1 + 1,
     num2: prevState.num2 + 1,
    };
  });
});

This is the result obtained -

If you notice the functional component is rendering twice for each useState

Let me just not bore you with all the other diggings I did and just get to the point, here are the advantages and disadvantages of using Functional components—

Advantages -

1. Writing less code, example in place of 26 lines you would be writing 16 because you would be avoiding defining the life cycle methods like componentDidMount componentDidUpdate etc.
2. Freshers tend to feel it’s easier to understand but once the project starts getting complex I don’t feel this would be a valid point.

Disadvantages -

1. useState re-renders components for each state when you are trying to update it in a async request, you’ll have to handle it in a hacky way again with useReducer
2. There is no concept of constructor and constructor is powerful function which most of the developers don’t realise, you can write resource intensive calculation once in this function and reuse the same logic without wasting time in recalculating it every time the component mounts.

Here are the advantages and disadvantages of using Class components —

Advantages -

1. You have complete control over the re-renders
2. In setState you can change multiple states with a single re-render

Disadvantages -

1. There is a learning curve for understanding lifecycle methods
2. Lines of code would increase marginally.

This made me wonder why this ambiguity was introduced in the first place? Why are there two ways to define a component?
so I started digging the history of React to figure out when and why functional components were introduced.

Here’s what I understood —

1. Functional components were developed to be stateless components.
2. Hooks are like hacks to make a functional component stateful and that’s the reason why they were introduced later.
3. Hooks is basically trying to replicate class component and on the contrary class components were built to be stateful hence it supports the lifecycle methods.

Conclusion —

I feel it’s just a choice of writing more lines of code with better control or to write less lines of code with less control.

I would rather concentrate on providing a quality product with more lines of code than thinking about making my life easier at the cost of control over the product I’m trying to build.

“So Yes, I would choose Class components over Functional components until there is a valid reason to use it.”

Now you might also ask me why functional components are pushed by React, and why are most of the tutorials using hooks?

The only logical answer which I could come up for that is,

1. It feels easier to explain hooks in a tutorial to a new developer when compared to lifecycle methods of a class component. It feels easy to understand as well for someone new to the platform which would encourage the new developers to start using it.
2. As new developers start using it, React’s user base increases which is like the main agenda for any platform.

Hope this helps you decide what to choose depending on your requirement. Do share it with your fellow developers.

Feel free to let me know if I’m missing anything.

I would love to learn.

Cheers! 🍻

Resources that helped me to come to the above conclusion —

Constructors in Functional Components With Hooks

Does React batch state update functions when using hooks?

Differences between Functional Components and Class Components in React - GeeksforGeeks

Functional Components vs. Class Components in React.js - Flatlogic Blog