So far, we have only learned how to create class components in React. These components are useful when you need to handle local states, but in some cases, we will need to render static markup. For static components, we need to use functional components, also known as stateless components. This will improve the performance of our application.

Let's see how it works and what it provides first, and then we will dig into the cases where one solution fits better than another.

The syntax is particularly terse and elegant – let's see an example:

() => <button /> 

The preceding code creates an empty button and, thanks to the concise arrow function syntax, it is straightforward and expressive. As you can see, instead of using the createClass factory or extending the component, we only define a function that returns the elements to be displayed.

We can, of course, use the JSX syntax inside the body of the function.