Survey box not shwing

[nimble rock]

I'm trying to write a survey banner that should only be shown if a user has not answered. I first wrote it in a "pure" react app, after transferring it to NextJS the logic for hiding the survey no longer works.

When a user presses the "Yes" or "No" button the survey should immediatly be persistently hidden, but I have to press one of the buttons many times, then wait a few seconds before my pop up hides. Why is this? Is there something next specific I'm not getting?

import { useState, useEffect } from 'react';
import { Button } from '@ruter-ds-next/button';
import { useTranslation } from 'next-i18next';

const Survey = () => {
  const [showSurveyLink, setShowSurveyLink] = useState(true);
  const { t } = useTranslation(['common']);

  useEffect(() => {
    const response = localStorage.getItem('surveyResponse');
    if (response) {
      setShowSurveyLink(false);
    }

  }, []);

  const handleResponse = (response) => {
    localStorage.setItem('surveyResponse', response);
    setShowSurveyLink(false);
  };
  const SurveyBoxTemplate = () => (
    <div className="fixed flex flex-col md:bottom-2 md:right-2 bottom-0 right-0 w-full md:w-96 bg-light-fill-quinary-solid bg-fill-quinary-solid dark:bg-dark-fill-primary z-10 p-6 text-dark-background-primary dark:text-dark-ink-primary shadow-raised">
      <h2 className="text-body-m-reg pb-6">{t('survey')}</h2>
      <div className="flex space-x-4">
        <Button
          as="a"
          href="My amazing form"
          target="_blank"
          rel="noopener noreferrer"
          onClick={() => handleResponse('yes')}
          className="w-1/2 text-center"
        >
          {t('yes')}
        </Button>
        <Button
          skin="SECONDARY"
          onClick={() => handleResponse('no')}
          className="w-1/2"
        >
          {t('no')}
        </Button>
      </div>
    </div>
  );

  return <>{showSurveyLink && <SurveyBoxTemplate />}</>;
};

export default Survey;

[clear edge]

Hi @nimble rock. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The issue you're experiencing might be related to how localStorage works with Next.js. Next.js is a hybrid framework that renders pages server-side by default, but it also supports static generation and client-side rendering.

The localStorage object is part of the window object in JavaScript, which is not available on the server-side. This means that if you're trying to access localStorage during server-side rendering (SSR), it will result in an error because localStorage is undefined.

In your code, you're using localStorage inside a useEffect hook, which should only run on the client-side after the component has been mounted. However, if your component is being server-side rendered, the state update (setShowSurveyLink(false)) might not be immediately reflected in the component's output.

One way to handle this is to use a state variable to track whether the component has mounted, and only then access localStorage. Here's an example:

const [hasMounted, setHasMounted] = useState(false);

useEffect(() => {
  setHasMounted(true);
}, []);

useEffect(() => {
  if (hasMounted) {
    const response = localStorage.getItem('surveyResponse');
    if (response) {
      setShowSurveyLink(false);
    }
  }
}, [hasMounted]);

This way, you're ensuring that localStorage is only accessed on the client-side.

If this doesn't solve your issue, it might be helpful to check if there are any errors in the browser console, or any network requests that are failing or taking a long time to complete. These could be clues to what's causing the delay in updating the component's state.

Also, please note that localStorage is synchronous and blocking, which means it could potentially impact your application's performance if you're reading from or writing to it frequently or with large amounts of data. For more complex or performance-critical state, you might want to consider using a state management library or a server-side database.

For more information on how Next.js handles data fetching and state, you can refer to the Next.js Documentation (https://nextjs.org/docs/basic-features/data-fetching).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: