Functional Component VS Class Component

The topics we will be covering are as follows:

1. What are React components?
2. Functional Components
3. Class Components
4. Class Component VS Functional Component

Components

Components are the building block of any React application. They are independent and reusable bits of code. Different components sum up to create a single react application.

Component

If we look at the figure above you can clearly see many components such as the header, footer, sider, and main content. But don’t forget that these components are enclosed in the main component as an App component. App component is a super component in which all nested components are gathered to form a single application.

React components are reusable components that can be displayed with different properties to display different operations. Components can be made using different “.js” files.

There are two types of React components:

1. Functional Component
2. Class Components

Let’s talk about each one of them in detail:

Functional Component

Functional Component or stateless component are the same as JavaScript functions which may take props as input and returns HTML which describes UI. Let’s make your own functional component for hello-world:

Under src create a separate folder for our components and name it as components. Create a file inside the components folder with the .js extension as shown in the figure below using the pascal naming convention:

Note: Pascal case — is a programming naming convention where the first letter of each compound word in a variable is capitalized.

Note: If you are new to React follow Get started with React JS to get started.

Open the file that you just made here we have the HelloWorld.js file, copy these code snippets:

import React from ‘react’
   function HelloWorld() {
     return <h1> Hello World from Class Component </h1>
   }
export default HelloWorld 

This code won’t work until we import this component to our app.js component simply copy the below code snippet to your App.js file to import your component to the App.js file:

import './App.css';
import HelloWorld from './components/HelloWorld'; // importing component
function App() {
   return (
      <div className="App">
         <HelloWorld /> // using your component
      </div>
   );
}
export default App;

This is how we can simply make our functional component.

Class Components

Class Components or stateful components are simply ES6 classes that extend React JS Component class. The class consists of multiple functions. Similar to functional components class components take props as input and render HTML as output.

The main thing that differentiates class components from functional components is states. A state dictates the current behavior and appearance of components. We will discuss these in detail in some other blogs.

To distinguish between both let’s make the same component as a class component:

Create another file for our class component as we made before in the functional component with the .js extension in the components folder.

Remember not to create two files with the same name.

Copy these code snippets in your class components file:

import React, { component } from 'react'
class Hello extends React.Component {
   render() {
      return <h1> Hello World from Class Component </h1>
   }
}
export default Hello

As discussed before, this never works until it gets connected to App.js. Simply import your component in App.js and use it as your custom tag inside the app div.

import './App.css';
import Hello from './components/Hello'; // importing component
function App() {
   return (
      <div className="App">
         <Hello /> // using our component
      </div>
   );
}
export default App;

Here is our output for both the classes:

Class Component VS Functional Component

Class components require you to extend them from React components and to create a render function for returning elements. They are also known as stateful components as states are used to dictate the current behavior and appearance of components.

Whereas functional components are simple JavaScript functions that may take props as input and return react elements. They are stateless components as it simply accepts data and displays them. There is no render function simply the output is returned.

Functional components can be made stateful components for which Hooks are introduced. We will be discussing Hooks in future blogs.

References

https://www.youtube.com/playlist?list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3

https://www.geeksforgeeks.org/reactjs-class-based-components/#:~:text=React%20class%20based%20components%20are,the%20Component%20class%20of%20ReactJS.

https://www.geeksforgeeks.org/differences-between-functional-components-and-class-components-in-react/#:~:text=Functional%20Components-,Class%20Components,which%20returns%20a%20React%20element.

https://www.w3schools.com/react/react_components.asp#:~:text=Components%20are%20independent%20and%20reusable,will%20concentrate%20on%20Function%20components.