1

I have a ReactJS application. The <App /> component is wrapped with a <ContextProvider /> component, because I need to have its state shared among components that only have <App /> as a common ancestor, since it is the <App /> component that mounts the 3 React Router v5 <Switch /> that are responsible of rendering:

  • the Header
  • the Body
  • the Right column

To wrap up:

<ContextProvider value={myValue}>
   <App {...props} />
</ContextProvider>

Everything is working nice and smoothly, but I have a doubt. The <Header /> component of a section that consumes the <ContextProvider /> above is defined and exported in this way:

import React from 'react';
import { useHistory } from 'react-router-dom';
// Other imports

function Header() {
  const history = useHistory();

  const goToHomePage = () => { history.push(PATHS.HOME_PAGE); };

  // Some business logic

  console.debug('render');

  return (
    <HeaderComponent
      title={(
        <TitleComponent title="My header" />
      )}
    />
  );
}

export default React.memo(Header);

If I inspect the console I can see that every time the values within <ContextProvider /> change, the render string is printed out, meaning that the <Header /> component is re-rendering.
But this component has no props and is exported via React.memo, so I don't understand why it is continuously re-rendering.

Ale TheFe
  • 1,540
  • 15
  • 43

0 Answers0