React(Next.js) conditionally render only once

Question

I wanted to create a welcome page that disappears after some seconds, and I've found on youtube a video that did something similar, but it's more like a loader. The problem is that I need this welcome page to appear just one time, the first time that a user visits my website, not every time a user reload the page. In the following code, I'm using Framer Motion for animating the welcome page, which disappears automatically when the animation ends, but of course it will re-render on every page load.

export default function Home() {
const [loading, setLoading] = useState(true);

useEffect(() => {
 loading
   ? document.querySelector('body').classList.add('loading')
   : document.querySelector('body').classList.remove('loading');
}, [loading]);
return (
 <AnimatePresence>
   {loading ? (
     <motion.div key="loader">
       <Loader setLoading={setLoading} />
     </motion.div>
   ) : (

How can I achieve that? I've thought about setting a cookie or using localStorage while a user enter the page, and do a conditional render with that, but it didn't work.

Answer 1

Every time page is rendered you have to know if the user is visiting your web page first time or not. In order to do that you have to store this information somewhere.

You can store this in local storage or cache.

Using local storage :

When a user visited the webpage store info with:

window.localStorage.setItem(name, content);

Every time page is rendered check if info setted with:

window.localStorage.getItem(name);

Example :

Set info to local storage:

window.localStorage.setItem('visited', true);

See if visited before:

let visited = window.localStorage.getItem('visited');
!visited && Component
...