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.