loading...

Classes vs Functional components in React

petr7555 profile image Petr Janik ・2 min read

React (3 Part Series)

1) Export / Import components in React 2) Classes vs Functional components in React 3) Beginner's guide to React State

When we use React, we can use either classes or functions for our components.

Classes

As you may have noticed in the first part of this series, we can create a React component as a class. To do so, we have to extend a React.Component class and implement its render() method.
This method must return either one root element or a fragment.

  • This class renders a <div> and its contents.
export default class TodoList extends React.Component { 
  render() { 
      return ( 
          <div> 
               <h1>Todo list</h1> 
          </div> 
       ); 
   } 
}
  • This class renders a fragment.
export default class TodoList extends React.Component { 
  render() { 
      return ( 
          <> 
               <h1>Todo list</h1> 
               <h1>Second element</h1>
          </> 
       ); 
   } 
}

Alternatively

export default class TodoList extends React.Component { 
  render() { 
      return ( 
          <React.Fragment> 
               <h1>Todo list</h1>
               <h1>Second element</h1> 
          </React.Fragment>
       ); 
   } 
}

Using fragments enables us to have multiple elements on the same level without having any <div> around them.

Functions

Instead of classes, we can write our components as functions.
The rules for the export and import are the same as with classes.
The function itself must return either one root element or a fragment.

  • Named function
export default function TodoList() {
  return ( 
          <div> 
               <h1>Todo list</h1>
          </div>
       );  
}
  • Arrow function
export const TodoList = () => {
  return ( 
          <div> 
               <h1>Todo list</h1>
          </div>
       );  
}

There is one caveat, however. Using default export of the arrow function is only possible after the declaration.

export const TodoList = () => {
  return ( 
          <div> 
               <h1>Todo list</h1>
          </div>
       );  
}

export default TodoList;
  • Anonymous function When exporting a function as default, we may omit the name completely. I do not recommend this, however.
export default function() {
  return ( 
          <div> 
               <h1>Todo list</h1>
          </div>
       );  
}

Another not so fashinable option could be

export const TodoList = function() {
  return ( 
          <div> 
               <h1>Todo list</h1>
          </div>
       );  
}

Personally, I prefer writing the components as arrow functions.

React (3 Part Series)

1) Export / Import components in React 2) Classes vs Functional components in React 3) Beginner's guide to React State

Posted on Jun 1 by:

petr7555 profile

Petr Janik

@petr7555

I'm a student of applied informatics at Masaryk University in Brno. I love coding, especially in Java and Python.

Discussion

markdown guide