Why does the React hook useRef throw an error when used?

Question

The error
This is the error that shows in the brower over the webpage.

Compiled with problems:X

ERROR


src\components\SignIn.js
  Line 5:21:  React Hook "useRef" is called in function "signin" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

SignIn.js
The part of my code that uses the React hook useRef.

import React, { useRef } from 'react'
import { Card, Button, Form } from 'react-bootstrap'

export default function signin() {
    const userRef = useRef()

    return (
        <>
            <Card>
                <Card.Body>
                    <h2 className='text-center mb-4'>Magnet</h2>
                    <Form>
                        <Form.Group id="username">
                            <Form.Label>Username</Form.Label>
                            <Form.Control type='text' ref={userRef} required />
                        </Form.Group>
                    </Form>
                </Card.Body>
            </Card>
        </>
    )
}

Your answer looks to be in the error message you posted. Please read through it thoroughly. — Brian Thompson, May 05 '22 at 18:41
@BrianThompson Yes thanks for the help I see what I need to do now. — Hector, May 05 '22 at 18:56

score 1 · Answer 1 · answered May 05 '22 at 18:43

You already have answer in your error

Line 5:21:  React Hook "useRef" is called in function "signin" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooks

you should change component name with Signin

score 0 · Accepted Answer · answered May 05 '22 at 18:42

0

You can't call a hook in a normal function, it must be called from a hook or functional component.

export default function signin()

The naming convention above doesn't refer to either. Change to Signin. And indeed, the error message explains that.

answered May 05 '22 at 18:42

Giorgi Moniava

27,046
9
53
90

@hectorwithc you should accept one of the answers which helped, that is common practice here. – Giorgi Moniava May 05 '22 at 18:47
1

Since you explained it well and where first with a answer I will accept your answer. – Hector May 05 '22 at 18:52

Why does the React hook useRef throw an error when used?

2 Answers2