Lazy loading element in typescript hook not working

Question

I've implemented a lazy loading hook, but for some reason the carousel component is not loading at all. I've got it from here: https://betterprogramming.pub/lazy-loading-in-next-js-simplified-435681afb18a

This is my child that I want to render when it's in view:

import { useRef } from "react";
import Carousel from "../components/carousel";
import useOnScreen from "../hooks/useOnScreen";

// home page
function HomePage() {
  const carouselRef = useRef();
  const carouselRefValue = useOnScreen(carouselRef);
  return (
        <div className="snap-y">
          {/* 1 */}
          <div className="flex justify-center items-start relative min-h-[calc(100vh_-_5rem)] bg-black snap-start ">
            {/* Cone */}
            <div className="absolute w-full max-w-full overflow-hidden min-w-fit cone animate-wiggle"></div>
    
            <div className="grid justify-center grid-cols-4 max-w-7xl">
//Content
          </div>
    
          {/* 2 */}
          <div className="z-20 pb-4 bg-black snap-start" ref={carouselRef.current}>
            {carouselRefValue && <Carousel />}
          </div>
    
          {/* 3 */}
          <div className="flex items-start justify-center py-32 min-h-fit bg-slate-50 snap-start">
           //More content
        </div>
      );
    }

export default HomePage;

useOnScreen hook:

import { useState, useEffect } from "react";
const useOnScreen = (ref: any) => {
  const [isIntersecting, setIntersecting] = useState(false);
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting));
    if (ref.current) {
      observer.observe(ref.current);
    }
  }, []);
  return isIntersecting;
};
export default useOnScreen;

Edit: Needed to add const carouselRef = useRef() as React.MutableRefObject<HTMLInputElement>; paired with @asynts's answer.

What is "not working" is it not loaded, even when it's on screen? Please be more specific. — asynts
– asynts, Commented Sep 14, 2022 at 7:26
@asynts edited. the second (carousel) component is not rendering at all — Furkan Öztürk
– Furkan Öztürk, Commented Sep 14, 2022 at 7:28

asynts · Accepted Answer · 2022-09-14 07:47:22Z

2

This is incorrect:

<div className="z-20 pb-4 bg-black snap-start" ref={carouselRef.current}></div>

it should be:

<div className="z-20 pb-4 bg-black snap-start" ref={carouselRef}></div>

answered Sep 14, 2022 at 7:47

asynts

2,4932 gold badges29 silver badges38 bronze badges

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

3 Comments

Furkan Öztürk Over a year ago

I get the error: Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'. Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<HTMLDivElement>'. Types of property 'current' are incompatible. Type 'undefined' is not assignable to type 'HTMLDivElement | null'.ts(2322) index.d.ts(137, 9): The expected type comes from property 'ref' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

asynts Over a year ago

Put that in the question please and also provide information where exactly this error occurs.

Furkan Öztürk Over a year ago

I fixed it. const carouselRef = useRef() as React.MutableRefObject<HTMLInputElement>

Collectives™ on Stack Overflow

Lazy loading element in typescript hook not working

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related