title: Load Component Only once in React js
body: <p>So I have a React App
  And it has 2 pages
  Lets say 1st one is Home and 2nd one is My Portfolio Section
  And My Portfolio Section has 2 functional components in it</p>
  <p>Home.js</p>
  <pre><code>import React from 'react'
  
  const Home = () =&gt; {
    return (
      &lt;h1&gt;Home Screen&lt;/h1&gt;
    )
  }
  
  export default Home
  
  </code></pre>
  <p>Portfolio Section</p>
  <pre><code>import React from 'react'
  import Projects from '../components/Projects'
  import Testimonials from '../components/Testimonials'
  const Portfolio = () =&gt; {
    return (
      &lt;&gt;
      &lt;h1&gt;Portfolio&lt;/h1&gt;
      &lt;Projects/&gt;
      &lt;Testimonials/&gt;
      &lt;/&gt;
    )
  }
  
  export default Portfolio 
  </code></pre>
  <p>When I visit Home , Portfolio everything loads fine but when I re-visit them again they again reload each and everytime</p>
  <p>I don't want the <strong>Projects</strong> component in the Portfolio Section to load more than once
  I want it to load only once on the Startup / when launching the site even before visiting the Portfolio section ( that is in background ) as it has large files that will take time to load and stay the same until user refreshes the page voluntarily .</p>
  <p>The  component has some 3d models in it which uses three.js
  So it is not a static site
  It will have its own animation
  But the entire component loading each time the page visited will take a lot of time</p>
  <p>But the <strong>Testimonials</strong> component will change dynamically</p>
  <p>So in 2 of the components I want one to stay the same without reloading
  And other to change dynamically</p>
  <p>How can I make a component load only once
  Any suggestion would help me
  I saw UseMemo but I don't know whether that would help me
  If so can someone explain how to use it in my case</p>