Functional vs Class Components in React

Intro:

Learning the differences between class and functional components is very important because as a developer, you’ll need to know when to use either of them. In this article, we’re going to explore the benefits for both functional and class components and even some shortcuts that will benefit us when creating a react app from scratch!

Functional Components:

• Functional components are also known as stateless components
• They’re stateless because they accept data and render UI
• They’re simple JavaScript functions
• A functional component accepts a property (props) and returns JavaScript XML (JSX)
• Don’t need a render() method
• Functional components should be favored if state isn’t needed

Class Components:

• It’s very similar to Object Orientation syntax since it needs a class
• Needs a render() method
• All the methods or functions need to be inside a class
• Also known as stateful component because they can hold state and update the state
• Class Components are needed for lifecycle methods (componentDidMount())
• When the props is passed down from a parent, we can access the props using this.props
• Since this are always needed in class components, all of the functions inside a class need to be arrow functions

Examples: (Used the Pokemon Searcher lab as an example)

Functional Component Example: PokemonCard Component

We can see how state is being used in this example

Class Component Example: Search Component

Here we kept the functional component since there’s no need to use state or lifecycle methods

Shortcuts:

RCC → We can use rcc+ tab inside an empty component file and it will create a basic class component. For example,

import React, { Component } from 'react'

export default class Testing extends Component {
  render() {
    return (
        <div>
            
        </div>
      )
   }
}

RACF → We can use racf + tab inside an empty component file and it will create a basic functional component. For example,

import React from 'react'

export const testing = () => {
      return (
           <div>
           </div>
       )
 }

Conclusion:

Thanks to ES6, there’s now a way in which we can use state in stateless components and it’s said to be more efficient than class components. We can now use React Hooks for this functionality. I won’t cover React Hooks in this blog, but make sure to check out the resources section at the bottom of this page for more info. Overall, React is a complicated framework with a lot of moving parts. It takes time to understand the differences and benefits of using either class or functional components. With more practice, you’ll know when and when not to use these different components.

Resources:

• https://www.freecodecamp.org/news/functional-components-vs-class-components-in-react/
• https://stackoverflow.com/questions/36097965/when-to-use-es6-class-based-react-components-vs-functional-es6-react-components
• https://www.twilio.com/blog/react-choose-functional-components
• https://reactjs.org/docs/hooks-intro.html
• https://blog.usejournal.com/react-hooks-the-most-performant-way-to-write-react-393e135e1cc