Is there a hook/method etc. in NextJs that is equivalent to the createRef() hook in original ReactJs?

Question

I am trying to use 3rd party package ReactPhotoSphereViewer in NextJs to display panoramic images in the website. The package works both in NextJs and in ReactJs.

Here is the code that is works in ReactJs:

import { ReactPhotoSphereViewer } from 'react-photo-sphere-viewer';
import React, {createRef, useEffect} from 'react';

...
function PanoramaImage({src}) {
  return (
    <ReactPhotoSphereViewer 
      src={src}
    ></ReactPhotoSphereViewer>
  );
} 
...
export default PanoramaImage;

Here is the code for same purpose in NextJs:

import React, {createRef, useEffect} from "react";
import dynamic from 'next/dynamic'

const ReactPhotoSphereViewer = dynamic(
  () =>
    import('react-photo-sphere-viewer').then(
      (mod) => mod.ReactPhotoSphereViewer
    ),
  {
    ssr: false,
  }
)

...
function PanoramaImage({src}) {
    return (
      <div>
        <ReactPhotoSphereViewer
            src={src}
        ></ReactPhotoSphereViewer>
      </div>
    )
}
...

export default PanoramaImage;

However when I tried to add reference to the ReactPhotoSphereViewer component, it works in ReactJs, but not in NextJs.

Here is the code after adding reference.

...
function PanoramaImage({src}) {
  const photoSphereRef = createRef(<ReactPhotoSphereViewer />);

  React.useEffect(() => {
    if (!photoSphereRef.current)
      return;

    photoSphereRef.current.toggleAutorotate();
  }, [photoSphereRef]);

    return (
      <div>
        <ReactPhotoSphereViewer
            ref={photoSphereRef}
            src={src}
        ></ReactPhotoSphereViewer>
      </div>
    )
}
...

export default PanoramaImage;

I think the problem is createRef hook here. So, is there any method that I can use instead of createRef, or if I am using it wrong, how should it be correct.

I would be glad if you help. Thank you.

edit: The problem is not on the createRef, I used useRef instead of createRef for both ReactJs and NextJs frameworks, ReactJs works perfectly, but I don't know why, NextJs does not detect the reference. Finally I gave up using NextJs and start working with ReactJs. Thank you for everybody.

Why do you create two `ReactPhotoSphereViewer` components? One in `createRef` and another one in `return()`? — Konrad, Feb 16 '23 at 17:46
useRef: The useRef is a hook that uses the same ref throughout. Saves its value between re-renders in a functional component and doesn’t create a new instance of the ref for every re-render. It persists the existing ref between re-renders. createRef: The createRef is a function that creates a new ref every time. Unlike the useRef, it does not save its value between re-renders, instead creates a new instance of the ref for every re-render. Thus implying - it does not persist the existing ref between re-renders. https://www.geeksforgeeks.org/difference-between-useref-and-createref-in-reactjs/ — Andrew Chung, Feb 16 '23 at 17:52
@Konrad I need the reference of the component to use some functions and the documentation suggesting using createRef, I am not a master of React/Next actually and I am looking for the correct way. How should it be if I can get the same result using useRef? documentation: https://www.npmjs.com/package/react-photo-sphere-viewer — Yusuf Arslan, Feb 16 '23 at 17:56
I changed `createRef ` to `const photoSphereRef = useRef(null);`. It worked for ReactJs but still does not work in NextJs. — Yusuf Arslan, Feb 16 '23 at 18:01
Next it is the same React. Make simple representation of your code at codesandbox, i think problem somewhere else — rycha, Feb 16 '23 at 18:21

score 0 · Answer 1 · answered Feb 16 '23 at 18:15

0

Use useRef hook. The difference is that createRef will create a new ref on render. With functional components you need the same ref each time. useRef does it.


function PanoramaImage({src}) {
  const photoSphereRef = useRef();

  React.useEffect(() => {
    if (!photoSphereRef.current)
      return;

    photoSphereRef.current.toggleAutorotate();
  }, [photoSphereRef]);

    return (
      <div>
        <ReactPhotoSphereViewer
            ref={photoSphereRef}
            src={src}
        ></ReactPhotoSphereViewer>
      </div>
    )
}
...

export default PanoramaImage;

answered Feb 16 '23 at 18:15

rycha

679
2
9

useRef is perfectly worked just like createRef in ReactJs, but I don't know why the same code does not work with NextJs. However, I gave up to fix it, instead, I started working with ReactJs. Thank you a lot. – Yusuf Arslan Feb 16 '23 at 21:43
our production projects in Next js, I work with next about 2 years. useRef works there absolutely similary to react – rycha Feb 17 '23 at 06:16

score 0 · Answer 2 · answered Feb 16 '23 at 19:05

import './App.css';
import React, { useEffect, useRef } from 'react';
import dynamic from 'next/dynamic';

// import { ReactPhotoSphereViewer } from 'react-photo-sphere-viewer';
const ReactPhotoSphereViewer = dynamic(
  () =>
    import('react-photo-sphere-viewer').then(
      (mod) => mod.ReactPhotoSphereViewer
    ),
  {
    ssr: false,
  }
);

export default function Home() {  
  return (
    <div className="App">
      <ReactPhotoSphereViewer src="Test_Pano.jpg" height={'100vh'} width={"100%"}></ReactPhotoSphereViewer>
    </div>
  );
}

Source: NPM

Or take a look at this code sandbox: https://codesandbox.io/s/sandbox-react-photo-sphere-viewer-by-elius94-j064sm?file=/src/App.js

(Credit to original author elius94)

Is there a hook/method etc. in NextJs that is equivalent to the createRef() hook in original ReactJs?

2 Answers2