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


The error

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

Compiled with problems:X


  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.


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 (
                    <h2 className='text-center mb-4'>Magnet</h2>
                        <Form.Group id="username">
                            <Form.Control type='text' ref={userRef} required />

>Solution :

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.

Leave a ReplyCancel reply