Stateless components

The React stateless component is just a pure JavaScript function that takes props as an argument and returns a React element. Here's an example of a stateless component:

function HeaderText(props) {
  return (
    <h1>
      {props.text}
    </h1>
  )
}
export default HeaderText;

Our HeaderText example component is also called a pure component. A component is said to be pure if its return value is consistently the same given the same input values. React provides React.memo(), which optimizes the performance of pure functional components. In the following code snippet, we wrap our component using memo():

import React, { memo }  from  'react';
function HeaderText(props) {
  return (
    <h1>
      {props.text}
    </h1>
  ...