Preventing rerenders with React.memo

Question

I have built a web app where users have profiles with different pages. In all the pages there is a profile picture and a banner and I want them to be rendered only once.

Now, every time the user changes the page the profile picture and banner are refreshed. I want to stop this.

How it works now:

What I want:

I have been playing with React.memo but I can't make it work.

Every parent page (Presets, Store and Courses) fetch all the data (profile picture, banner...).

And then I pass the data to the child component Banner and ProfilePicture.

This is my Banner component code (the banner prop is an url type string):

import React, { useState, useEffect } from 'react';
import { Container, Row, Col} from "react-bootstrap";

const Banner = ({banner}) => {

const [width, setWidth] = useState(window.innerWidth);
const breakpoint = 620;


useEffect(() => {
    window.addEventListener("resize", () => setWidth(window.innerWidth));
},[])

return ( 
    <>
        <Container style={{ maxWidth: "100%" }}>
            <Row>
                <Col className="pl-0 pr-0">
                    {width < breakpoint ?
                        <div
                        style={{
                            backgroundImage: `url(${banner})`,
                            backgroundSize: "cover",
                            backgroundPosition: "center center",
                            height: "40vw",
                            display: "flex",
                            alignItems: "center",
                        }}
                        className="justify-content-center"
                        >
                        
                        </div>
                    :    
                        <div
                        style={{
                            backgroundImage: `url(${banner})`,
                            backgroundSize: "cover",
                            backgroundPosition: "center center",
                            height: "25vw",
                            display: "flex",
                            alignItems: "center",
                        }}
                        className="justify-content-center"
                        >
                        
                        </div>
                    }
                </Col>
            </Row>
        </Container>
    </>
 );
}

export default React.memo(Banner);

And in the parent components (All the pages) I fetch the data and I pass it to the banner component like this:

<Banner banner={banner}/>

I think banner is first undefined and then is the fetched url so the props change every time from undefined to string and thats why React memo is not working.

And I don't know how to solve this.

Answer 1

I have solved my own question. I'm not sure this is the best answer but this is what I did:

With react-router I have added this route: /:username/:page

Then I access the page name with props.match.params.page and change the child components depending on it.