DEV Community

Petr Janik
Petr Janik

Posted on • Edited on

8

Classes vs Functional components in React

In React, we can either use 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>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode
  • This class renders a fragment.
export default class TodoList extends React.Component {
  render() {
    return (
      <>
        <h1>Todo list</h1>
        <h1>Second element</h1>
      </>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Alternatively

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

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.

Default export

  • Named function
export default function TodoList() {
  return (
    <div>
      <h1>Todo list</h1>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode
  • Anonymous function

When using default export, we may omit the name completely.
However, I do not recommend this.

export default function () {
  return (
    <div>
      <h1>Todo list</h1>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode
  • Named arrow function
const TodoList = () => {
  return (
    <div>
      <h1>Todo list</h1>
    </div>
  );
};

export default TodoList;
Enter fullscreen mode Exit fullscreen mode
  • Anonymous arrow function
export default () => {
  return (
    <div>
      <h1>Todo list</h1>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

Named export

  • Named function
export function TodoList() {
  return (
    <div>
      <h1>Todo list</h1>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode
  • Named arrow function
export const TodoList = () => {
  return (
    <div>
      <h1>Todo list</h1>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

Another not so fashionable option could be

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

Personally, I prefer writing the React components as arrow functions.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (2)

Collapse
 
asher_dev profile image
Asher

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

You could just export default anonymous arrow function



export default () => {
  return ( <h1>Hello World</h1> )
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
petr7555 profile image
Petr Janik

Thank you, I have corrected it.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay