So far, we have only learned how to create class components in React. These components are useful when you need to handle local state, 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.

In the Passing props to a component and validating them with PropTypes recipe, we created some layout components (Header, Content, and Footer). These components, as you may imagine, are frequently not dynamic (unless you want to have a toggle menu or some user information in the header), so in this case, we can convert them into functional components.