javascript - useRef() Invalid hook call - Stack Overflow

admin管理员组

文章数量:1290206

I'm trying to use useRef() hook inside the body of a function ponent in a NextJs project and I still get the error below. I've gone through the React Hook rules and I can't find the reason for this error and this not working. Does anyone have an idea?

Error: Invalid hook call. Hooks can only be called inside of the body of a function ponent. This could happen for one of the following reasons:

import  React, { useRef } from 'react';

export default function Diagram() {

  const svgRef = useRef();

  return (
      <>
        <div className="container-svg py-4">
        <svg  ref={svgRef} viewBox="0 0 300 300">
        <g transform="translate(150, 150)">
          <g>
            <path id="triangle" d="M0, -125 L-150,150 L150, 150 L0, -125 M 0,50 L-150, 150 M150, 150 L0,50  L0,-125" stroke="black" fill="none"/>
          </g>
            {
              posts.map( post => {
                return (
                  <circle key={post.id} className="circle" cx={post.point.x} cy={post.point.y} r="5" />
                )
              })
            }
            <circle className="circle" cx="0" cy="0" r="5" />
          </g>
        </svg>
      </div>
      </>
  )
}

I'm trying to use useRef() hook inside the body of a function ponent in a NextJs project and I still get the error below. I've gone through the React Hook rules and I can't find the reason for this error and this not working. Does anyone have an idea?

Error: Invalid hook call. Hooks can only be called inside of the body of a function ponent. This could happen for one of the following reasons:

import  React, { useRef } from 'react';

export default function Diagram() {

  const svgRef = useRef();

  return (
      <>
        <div className="container-svg py-4">
        <svg  ref={svgRef} viewBox="0 0 300 300">
        <g transform="translate(150, 150)">
          <g>
            <path id="triangle" d="M0, -125 L-150,150 L150, 150 L0, -125 M 0,50 L-150, 150 M150, 150 L0,50  L0,-125" stroke="black" fill="none"/>
          </g>
            {
              posts.map( post => {
                return (
                  <circle key={post.id} className="circle" cx={post.point.x} cy={post.point.y} r="5" />
                )
              })
            }
            <circle className="circle" cx="0" cy="0" r="5" />
          </g>
        </svg>
      </div>
      </>
  )
}

• javascript
• reactjs
• next.js
• react-hooks

Share Improve this question Follow edited Feb 2 at 9:18 Mark Rotteveel 109k229229 gold badges156156 silver badges220220 bronze badges asked Aug 30, 2020 at 0:11 Die DuroDie Duro 5311 gold badge11 silver badge44 bronze badges 2

• Can you paste a link of codesandbox ? because the code seems legit. – simbathesailor Commented Aug 30, 2020 at 5:26
• 1 I tried it on a sandbox and it worked as expected. And on my local project I made it work using createRef(). But I couldn't with useRef; I don't know if it had to do with some NextJs specifics, or what. Thanks for your help! – Die Duro Commented Aug 31, 2020 at 1:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

I am using next 10.1.3 and react 17.0.1 and I used React.createRef() because useRef() wasn't working. I made an example per the question originally asked. I am adding this because the createRef answer in the ments is inplete and this makes it easy to understand.

import  React from 'react';

export default function Diagram() {

  const svgRef = React.createRef();

  return (
      <>
        <div className="container-svg py-4">
        <svg  ref={svgRef} viewBox="0 0 300 300">

...

This probably happens because useRef() and other react hooks are exclusive for Client-Side ponents. If you do not specify that your ponent is client-side, the later versions of NextJS assumes that this is a Server Side ponent by default. Use the directive 'use client' to render this ponent in the client-side environment.

Using the useRef react hook with nextjs app worked fine for me.

import React, { useEffect, useRef } from "react";

const formCompo = ()=>{
const form = useRef<HTMLDivElement>(null);

useEffect(() => {
  if (typeof window !== "undefined" && form.current) {
    console.log("Element:", form.current);
  }
}, []);

 return <form ref="form">Title</from> 
}

本文标签： javascriptuseRef() Invalid hook callStack Overflow