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> ...