React: Class Components vs Functional Components

If you are new to learning React, you may have become a little confused seeing react components written in multiple ways. There is a lot of pieces that put together a functional react application. When learning a new library or framework, seeing things written in different ways can just add to the confusion you are already trying to eradicate. For me, I kept seeing components written in two different ways, sometimes I saw class declaration components, and other times I saw components written like functions. It wasn’t for a few days that I understood the nuances between class components and functional components, and when you might want to use one over the other. Hopefully I’ll be able to clear some code smoke in this post.

Class Component Syntax

Image for post

When starting a component you want to make sure you are importing and exporting the correct components. After importing ‘React’ to your file, class components are declared like a ruby class, but you need to include “extends React.Component” on the end. Establish what you want you want to render in your component by placing it within the return statement inside the render method. If you want use this component in other components, you have to include the export default at the end of your file.

Functional Component Syntax

Image for post

Here is an example of a functional component, looks like a regular old javascript function. The standard imports and exports are the same, but this format doesn’t include a render method, only the return statement. Functional components also take an argument of props(properties)that are passed down from other components.

When to Use One or the Other?

In React 16.8, you can really accomplish the same goals with both of these component types. Before, functional components couldn't have their own state or set state, it had to be passed down through props. Lifecycle methods were also not available to functional components. Class components had more functionality and could perform state logic while functional components were used in a more presentational manner when you didn’t need state. With the latest version of React, with the implementation of hooks, you can set state and use lifecycle hooks within functional components like so:

import React, { useState } from 'react';

function Example() {
// Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

You can now essentially achieve the same goal from both components and now comes down to personal style and preference. Hope that made components a bit clearer and you are able to understand/recognize the differences between the two.

Happy Coding!

Connect on Linked In !

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