Avoid render a component - Background video-CodePudding

I have this background video:

<video id="my-video" className="video" autoPlay muted loop>
   <source src="./assets/fondoPrueba.mp4" type="video/mp4" />
</video>

Which is set to loop but I need to prevent it from starting over when there is a render of some component. Is there a way to prevent the component from being rendered when there are renders other than the componentDidMount() , i.e. the first render

<><div className="App">
                <header>
                    <div id="contenedorHeaderPrincipal">
                        <div id="contenedorHeaderIzquierdaPhone">
                            <img src={"./assets/gobierno-entre-rios.png"} alt="ParanaLogo" height="90%" width="90%"></img>
                        </div>
                        <div id="contenedorHeaderCentroPhone">

                        </div>
                        <div id="contenedorHeaderDerechaPhone">
                            <img src={"./assets/sideMenuIcon.png"} alt="ParanaLogo" height="32px" width="32px" id="sideBarIcon" onClick={() => showSideMenu(false)}></img>

                        </div>
                    </div>
                </header>

                <section>
                    <div className="contenedorSideBar">
                        <video id="my-video" className="video" autoPlay muted loop>
                            <source src="./assets/fondoPrueba.mp4" type="video/mp4" />
                        </video>
                        <div className="contenedorPrincipal">
                            <div style={{width:"100%", display:"flex", justifyContent:"right", marginRight:"5px"}}>
                                <SearchBar></SearchBar>
                            </div>
                            <div className="contenedorPrincipalHeader">
                                <h2 style={{ margin: "15px" }}>BIENVENIDO</h2>

                                <Link to={"/ingresar"} id="textoHipervinculo" style={{ margin: "20px" }}><button className='btn-primary-inverse'>INICIAR SESIÓN</button></Link>

                                <h2 style={{ margin: "20px" }}>¿Sos nuevo ?</h2>
                                <Link to={"/registro"} id="textoHipervinculo"><button className='btn-new-account'>CREA TU CUENTA</button></Link>
                            </div>
                            <div className="contenedorCuerpo">
                            <hr style={{ margin: "20px" }}></hr>
                            <h2 style={{ margin: "20px" }}> Tuviste un problema?</h2>
                            <Link to={"/registro"} style={{ margin: "20px" }} id="textoHipervinculo">No recuerdo mi contraseña</Link>
                            <Link to={"/registro"} style={{ margin: "20px" }} id="textoHipervinculo">No puedo validar mi correo electrónico</Link>
                            <Link to={"/registro"} style={{ margin: "20px" }} id="textoHipervinculo">Si es ciudadano extranjero ingrese aquí</Link>
                        </div>

                        </div>   
                    </div>
                    <div className="sideBarStyle">
                        <SideBar cerrar={showSideMenu}></SideBar>
                    </div>
                </section>


            </div><hr style={{ margin: "40px" }}></hr></>

CodePudding user response：

Make it a memo component with MyMemoVideo = React.memo(MyVideo).

Ideally you don’t pass any props to <MyMemoVideo />, but if you do, please ensure that those props stay the same over time. This way you got a component that doesn’t re-render after mounted.