Next.js app is lagging after initial scrolling

Question

I'm rewriting my React app in Next.js. I have a navbar that transitions down after scrolling to a certain point. My problem is that when the page loads for the first time, the scrolling is laggy and the app freezes for a couple of milliseconds. After the first effect of the dropdown the navbar is working properly. I wonder what might cause this problem, which wasn't present when I was using React only. I figured out that my React-slick carousel interferes with it.

The navbar:

//hooks and imports

import styles from '../styles/Navbar.module.scss';
import React from "react";
import { useState } from "react";
import Container from "react-bootstrap/Container"
import Logo from "../public/images/logo4.png";
import { useMediaQuery } from 'react-responsive'
import { Navbar, Nav, Row, Col, Collapse, Offcanvas} from 'react- 
bootstrap';
import Link from "next/link"
import Image from 'next/image'
import styled from "styled-components";

const ImageWrap = styled.span`
margin-left: 1.5rem;
height: 100px; 
width: 100px;`;

const NavComponent = () => {

  const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1224px)' })
  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })

  const [open, setOpen] = useState(false);
  const [scroll, setScroll] = useState(0); //watch scroll position
  const [newNav, setNewNav] = useState (false) //switch to new css class
  
  React.useEffect(() => {
      window.addEventListener('scroll', scrollPos);
      return () => window.removeEventListener('scroll', scrollPos);
      }, []);
  
  React.useEffect(() => {
      window.addEventListener('scroll', newNavbar);
      return () => window.removeEventListener('scroll', newNavbar);
      }, []);

  const newNavbar = () => {
      if (window !== undefined) {
        let posHeight_2 = window.scrollY;
        posHeight_2 > 112 ? setNewNav(!newNav) : setNewNav(newNav)
      }
    };

  const scrollPos = () => {
    if (window !== undefined) {
      let posHeight = window.scrollY;
      posHeight > 112 ? setScroll(posHeight) : setScroll(0)
    }
  }; 
 
  const navClass = newNav ? "menu2_show" : "menu2"


  const [show, setShow] = useState(false);

  const handleClose = () => setShow(!show);
  const handleShow = () => setShow(!show);

//the main navbar: 

return (
    
 


      
        
          
             
             setOpen(!open)}>
              
            
          
        
        
          
            
              
                  
                    
                  
              
            
          
        
        
          
            
            
                
            
             
          
        
     
  

//the dropdown navbar: 

  
    
      
          
             setOpen(!open)}>
              
            
          
         
        
          
            
              
                
              
            
          
        
        
          
            
            
                
            
            
          
        
    
  
    
    )
}

// props given to the carousel 
  sendDataToParent}/>

//the carousel:
 
import React from "react"; 
import { useState } from "react";
import Slider from "react-slick";
import Link from "next/link"

function Carousel(props) {

    const [zoomed, setZoomed] = useState ('{}')
    const [fading_3, setFading_3] = useState(false)

    const [indexValue, setIndexValue] = useState({})

    React.useEffect(() => {
        setZoomed('backgroundSize:550')
      }, []);

    React.useEffect(() => {
        setFading_3(!fading_3)
       }, []); 


    const classes_4 = fading_3 ? 'zoomClass' : 'zoomClass hide'
    const [imageIndex, setImageIndex] = useState(0);

    React.useEffect(() => {
        setIndexValue(props.array[imageIndex])
       }, [imageIndex]);

    props.sendDataToParent(indexValue)

    const settings = {
    focusOnSelect: true,
    infinite: true, 
    lazyLoad: true,
    speed: 600,
    slidesToShow: 3,
    centerMode: true,
    centerPadding: 0,
    beforeChange: (current, next) => setImageIndex(next),
    };
    return (
    
        
            {props.array.map((img, idx) => ( 
            
                {idx === imageIndex ?
                    
                        
                     :
                    
                }
            
            ))}

         
    
    );
}

export default Carousel;

Next.js app is lagging after initial scrolling

Answers (1)

Related Questions