Question 74504 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Welcome page doesn't disappear after timeout – Reactjs

The welcome page should ONLY appear during the first visit to the site

Accordingly, I used the useEffect hook, inside it I define the LocalStorage constant. I also use setTimeout to make the greeting disappear after a certain amount of time.

const [showStartPage, setShowStartPage] = useState(startPage.nothingShow);

    useEffect(() => {
        const firstTimeLoaded = localStorage.getItem("firstTimeLoaded")
        if (!firstTimeLoaded) {
            setTimeout(() => {
                setShowStartPage(startPage.startPageShow);
                localStorage.setItem("firstTimeLoaded", "true");
            }, 2500);
        } else setShowStartPage(startPage.startPageNotShow)
    }, []);

<Fragment>
    <Stack>
       CONTENT ==>
    </Stack>
    {showStartPage === 2 && (<StartPage />)}
</Fragment>

==> Here is the content that is located under the welcome page during the first visit to the site.

To determine the state of the welcome page, I use an enum that includes 3 states:

  1. when the welcome page is shown
  2. when the welcome page is not shown
  3. when the state is not yet defined
export enum startPage {
    startPageShow = 2,
    startPageNotShow = 1,
    nothingShow = 0
}

As a result, the welcome page is not loaded when you re-enter the site, as it should be. Loads the first time you visit the site, as it should be. But it does not disappear after a while, as it should NOT.

What did I do wrong?

I tried to simplify the situation by excluding the enum and leaving only boolean values, but I need an undefined state to not show anything until the state is defined

Tags:

2

Answers


  1. 0 
    useEffect(() => {
        const firstTimeLoaded = localStorage.getItem("firstTimeLoaded");
        if (!firstTimeLoaded) {
            setShowStartPage(startPage.startPageShow); // appear
            setTimeout(() => {
                setShowStartPage(startPage.startPageNotShow); // after 2500ms disappear
                localStorage.setItem("firstTimeLoaded", "true"); 
            }, 2500);
        } else setShowStartPage(startPage.startPageNotShow)
    }, []);
    Login or Signup to reply.
  2. 0

    You can use an initializer function to get the showStartPage state from local storage. If the key doesn’t exist in local storage (or false), show the start page, and trigger the setTimeout in the useEffect to hide it.

    // init state from local storage using an initializer function
const [showStartPage, setShowStartPage] = useState(() => !JSON.parse(localStorage.get('firstTimeLoaded') ?? 'false'));

useEffect(() => {
  if(showStartPage) { // if the state page is displayed
    setTimeout(() => { // hide it after a timeout and set storage
      localStorage.setItem('firstTimeLoaded', true);
      setShowStartPage(false);
    }, 2500);  
  }
}, [showStartPage]);

return (
  <Fragment>
    // ...content
    {showStartPage && (<StartPage />)}
  </Fragment>
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search