How to render a functional component only once?

Question

React

There is such a structure of components, they are all functional:

export const App = () => {
  const [layout, changeLayout] = useState(LayoutType.DESKTOP);

  return (
    <React.Fragment>
      <Header>
        {PAGE_TITLE}
      </Header>
      <SwitchLayout
        layout={layout}
        onChangeLayout={changeLayout}
      />
      <MovieList
        layout={layout}
      />
    </React.Fragment>
  );
};

header:

export const Header = (
  { children } : HeaderPropsType
) => (
  <nav className={`${styles.header} navbar navbar-dark bg-dark`}>
    <div className="container">
      <div className="row m-auto">
        <i className="fa fa-film fa-2x text-white my-auto" />
        <div className="h3 ml-3 my-auto text-light">{children}</div>
      </div>
    </div>
  </nav>
);

Is it possible to make the Header component only render once?

Answer 1

export default React.memo(Header);