Как отрендерить функциональный компонент только один раз?

Question

[lexstile]

Есть такая структура компонентов, все они функциональные:

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>
);

Можно ли сделать так, чтобы компонент Header рендерился только один раз?

Comments

[Алексей Уколов]

Что вы понимаете под "рендерился один раз"? У вас он постоянно перерендеривается? Если да, то как вы это поняли?

[lexstile]

Dmitry Yaha, не, возьмем за константу, меняться не будет

[lexstile]

Алексей Уколов,
1. Чтобы рендер был только при монтировании компонента.
2. Да.
3. Через плагин react developer tools.

[lexstile]

Dmitry Yaha, уверен на 100%, что рендерится Header

Answer 1

[Антон Спирин]

export default React.memo(Header);

Comments

[lexstile]

Благодарю, то, что нужно