Next.js Discord

Discord Forum

How to pass refs to lazy load components

Unanswered
English Angora posted this in #help-forum
Open in Discord
English AngoraOP
Hello guys I'm trying to pass refs to lazy load component but getting null instead of {current: null} please check where I'm doing mistake.
'use client';
import dynamic from 'next/dynamic';
import { useRef } from 'react';
const Component = dynamic(() => import('../components/Component'), {
ssr: false,
});

export default function Home() {
const ref = useRef(null);
return <Component ref={ref} />;
}
-------------------------------------------------------------------------
import { forwardRef, useEffect } from 'react';
const Component = forwardRef((props, ref) => {
useEffect(() => {
console.log(ref);
}, []);
return <h1>Practice</h1>;
});
export default Component;

5 Replies