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.

You should store a cookie or a value in localStorage once a user has visited your app. Read from localStorage when the app loads. — Drew Reese
– Drew Reese, Commented Oct 25, 2021 at 20:14

Yasin BARAN · Accepted Answer · 2021-10-25 20:14:39Z

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
...

answered Oct 25, 2021 at 20:14

Yasin BARAN

2573 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ivan93 Over a year ago

I've tried it, but as i understood, next.js doesn't support localStorage. I'm looking for a workaround, thanks for your comment, i think i'm making some progress.

Collectives™ on Stack Overflow

React(Next.js) conditionally render only once

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related