top of page
Logo der Online Agentur mdwp

Functional Components

React JS is a popular JavaScript library for building user interfaces, particularly for single-page applications. Within React, a Functional Component is a way to construct components using just a function. They're also known as Stateless Components because they simply accept data and display them in some form, they don't manage or track changes to that data (state).

Functional components are easier to read, test, and understand compared to their counterpart, Class Components. You can use functional components as much as possible and use class components for more complex functionality involving state and lifecycle methods. A simple functional component in React might look like this:

import React from 'react';

//This is a functional component named 'HelloWorld'
const HelloWorld = () => {
return <h1>Hello World</h1>;

export default HelloWorld;

As you can see, the function HelloWorld returns some JSX (which looks similar to HTML and is used by React to build the user interface), that says "Hello World".

In more recent updates to React, Hooks have been introduced which allow functional components to have state and manage lifecycle methods just like class components. This makes functional components even more powerful and flexible, and many developers and organizations are moving toward primarily using functional components instead of class components.

bottom of page