What are the differences between functions and classes in React?

React class vs. functions. What's the big deal? What's the big difference?

For anyone new to React, you might be wondering why all the tutorials keep changing the pre-generated code from create-react-app over into a class.

The quick answer is that it has to do with states. But before we dig into that, let’s look at the differences between a function and a class in React.

A function in React looks something like this:

function App(){
     //some code here
 
 
     return(
         <div className="App">
             <!-- some html here -->
         </div>
     )
 }

In contrast, a component class in React looks something like this:

import { Component } from 'react'
 
 class App extends Component {
     constructor(){
         super();
     }
     
     render(){
         return(
             <div className="App">
             <!-- some html here -->
             </div>  
         )
     }
 }

When we look at it, a function looks simpler to deal with. However, a function in React is simply just that — a function. Its main and only capabilities are to accept props and return a React element.

Well, this is all before React 16.8 came into the scene.

The newest versions of React let you use the useEffect hook to use lifecycle events in your functional components. Back in the day before 2019, lifecycle events were only available to React.Component, which is something you extend from in your class Component .

It used to be that if you wanted to use states through lifecycle hooks, you’d need to use a React class instead of a function.

This is no longer the case.

So how do you use the useEffect hook?

Let’s take a look at the code sample below.

import React, { useState, useEffect } from 'react';
 
 function App() {
 
     const[name, setName] = useState('Dotted');
     
     useEffect(() =>{
         console.log('change has occured');
     }, [name])
 
   function changeName(){
     setName('Squirrel');
   }
     
     return(
     <div className="App">
         <h1>{name}</h1>
         <button onClick={() => changeName()} > 
         Change my name!
         </button>
     </div>
     )
 
 }

The above function has three parts to it:

[1] The state is represented through const[name, setName]=useState('Dotted')

  • the state takes parameters — the thing that is used to represent the variable (i.e. name) and the setter function (i.e. setName)

[2] useEffect() function, which takes 2 parameters

  • the first parameter deals with what happens when a change has occurred. You can put whatever you want in here like code and functions.
  • the second parameter is the ‘watcher’ parameter that detects when a change has occurred and triggers the code in the first parameter. In our case, it’s when name is changed via setName function.

[3] The returned React component

  • This is what the users see. In the code above, there is a button with an onClick function that lets you write code to execute. In our case, it is an anonymous function that takes no parameters and runs changeName()

In contrast, if we wanted to write the same thing but as a React class, here’s what it’ll look like:

import { Component } from 'react'
 
 class App extends Component{
 
   constructor(){
     super();
 
     this.state = {
       name: 'Dotted'
     }
 
     this.changeName = this.changeName.bind(this)
   }
 
   changeName(){
     this.setState({ name: 'Squirrel' })
   }
 
   render(){
     return(
       <div className="App">
         <h1>{this.state.name}</h1>
         <button onClick={this.changeName} >
           Change my name!
         </button>
       </div>
     )
   }
 
 }

There are three parts to the code above:

[1] The state, as represented through this.state = {name: 'dotted'}

  • the state needs to be declared inside the constructor. The purpose of the constructor is to initialize an object and prepare it for use.

[2] The changeName() function which accesses the setState method in order to change the state of name to Rose.

[3] The returned React component, which must be wrapped inside render() to work.

  • onClick lives here and lets you access changeName() via this. However, this.changeName needs to be manually bound to this . To achieve this, you need to bind and set the function inside the constructor. If you don't do this, you will get uncaught TypeError: Cannot read property 'setState' of undefined from React.

Let’s cut the chase: Classes or Functions in React?

With the release of React 16.8 in early 2019, a major gap between classes and functions has been reduced significantly. The ability to use states in function makes creating React components much more economical for a developer.

So why should you use class components at all?

The main answer to this is to do with the ability to create extensibility. With classes, you can use the extends keyword to create child classes and set up inheritable features. In contrast, a React function component is closed off.

When and where you’d use extends is beyond the scope of this piece and perhaps for another time to write about.

A React component function is easier to deal with, especially if you’re working with atomic design principles. It is much easier to read because it is mostly just plain JavaScript functions. You also end up with less code.

Article by:

Aphinya Dechalert

Aphinya Dechalert

Aphinya is a skilled tech writer with field experience in software development, agile, and fullstack JavaScript. She is a dev advocate and community builder, helping others navigate their dev journey.

More posts...

React

5 Ways to Structure Your React App Files

React is great. It gives us a ton of freedom to do what we need to do. However, with great freedom comes the increased potential for a project that’s structurally mangled. When I first started using React, all the tutorials were pretty basic with file structures that were linear

React

Next.js is the next best thing — but what’s the catch?

Looking into another React extension Next.js is a popular open-source JavaScript framework for developing server-side rendered React applications. It’s simple, lightweight, and efficient, making it an ideal choice for small- to medium-sized projects. In a nutshell, the framework enables you to get up and running with React quickly

React

Learn React: Variables, Conditionals and Event Listeners Inside A Component

-------------------------------------------------------------------------------- Previously on Learn React from Scratch Series: Learn React: Your First React Component ExplainedPreviously on Learn React from Scratch Series: Learn React: Advanced JSX and Everything Else You Need To KnowPreviously on Learn React from Scratch Series: Learn React: Quick Introduction to JSXJSX stands for JavaScript Extension. It is

React

Learn React: Your First React Component Explained

-------------------------------------------------------------------------------- Previously on Learn React from Scratch Series: Learn React: Advanced JSX and Everything Else You Need To KnowPreviously on Learn React from Scratch Series: Learn React: Quick Introduction to JSXJSX stands for JavaScript Extension. It is not JavaScript, per se, but an extension of it. This means that if