title: Can't perform a React state update with useMediaQuery
body: <p>I'm trying to use useMediaQuery with NextJS to conditionally render a background image, but i get
  &quot;Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. &quot;</p>
  <p>when getStaticProps starts.</p>
  <p>I tried to add some cleanup function, but with no results.</p>
  <pre><code>    export const getStaticProps: GetStaticProps = async () =&gt; {
    const rocketData = await fetchPlanetsInfo(&quot;technology&quot;);
  
    return {
      props: {
        data: rocketData,
      },
    };
  };
  
  
  export default function Technology({ data }: Props) {
    const isMobile = useMediaQuery({ query: &quot;(max-width: 30em)&quot; });
    const [mobileView, setMobileView] = React.useState(false);
  
    React.useEffect(() =&gt; {
      setMobileView(isMobile);
    }, [isMobile]);
  
    return (
      &lt;Layout&gt;
        &lt;MainPagesComponents
          backgroundImage={spaceLaunchBackground}
          title={&quot;03 SPACE LAUNCH 101&quot;}
        &gt;
          &lt;Swiper
            // direction={&quot;vertical&quot;}
            modules={[Pagination, Autoplay]}
            spaceBetween={0}
            slidesPerView={&quot;auto&quot;}
            centeredSlides={true}
            scrollbar={{ draggable: true }}
            autoplay={{
              delay: 5000,
              pauseOnMouseEnter: true,
              disableOnInteraction: false,
            }}
            pagination={{
              clickable: true,
              bulletActiveClass: &quot;tech-active-class&quot;,
              bulletClass: &quot;swiper-tech&quot;,
              horizontalClass: &quot;swiper-tech-position-container&quot;,
              renderBullet: (index, className) =&gt; {
                return `
              &lt;div class='${className}'&gt;${index + 1}&lt;/div&gt;
              `;
              },
            }}
            className=&quot;mySwiper&quot;
          &gt;
            {data.map((rocket) =&gt; {
              const portraitImage = rocket.images.portrait.slice(1);
              const landscapeImage = rocket.images.landscape.slice(1);
              const viewImage = {
                width: mobileView ? &quot;375px&quot; : &quot;515px&quot;,
                height: mobileView ? &quot;170px&quot; : &quot;527px&quot;,
              };
              return (
                &lt;SwiperSlide key={uuidv4()}&gt;
                  &lt;TechnologySlider
                    view={viewImage}
                    image={mobileView ? landscapeImage : portraitImage}
                    title={rocket.name.toUpperCase()}
                    description={rocket.description}
                  /&gt;
                &lt;/SwiperSlide&gt;
              );
            })}
          &lt;/Swiper&gt;
        &lt;/MainPagesComponents&gt;
      &lt;/Layout&gt;
    );
  </code></pre>
  <p>UPDATE:</p>
  <p>I create a simple gif where i'm recording the error,
  <a href="https://gifyu.com/image/SHbRd" rel="nofollow noreferrer">https://gifyu.com/image/SHbRd</a></p>