What causes "ReferenceError: useRef is not defined"?

Forgot to import useRef from 'react' Importing React as a default import (import React from 'react') but trying to use useRef() directly instead of React.useRef() Typo in the import statement

Error2 Fixes Available

ReferenceError: useRef is not defined

ReferenceError: useRef is not defined

What does this error mean?

This error occurs when you try to use the `useRef` hook in a React component without importing it first. Hooks must be explicitly imported from the 'react' package.

Common Causes

Forgot to import useRef from 'react'
Importing React as a default import (import React from 'react') but trying to use useRef() directly instead of React.useRef()
Typo in the import statement

How to Fix It (2 Solutions)

Import useRef from React

Add useRef to your named imports from the 'react' package.

Code

import { useRef } from 'react';

// Or with other hooks:
import { useState, useEffect, useRef } from 'react';

Use React.useRef()

If you prefer using the default import, access the hook through the React object.

Code

import React from 'react';

const myRef = React.useRef(null);

Related Errors

React Hook called conditionally or in wrong order

View fix

JavaScript

TypeError: X is not a function

View fix

Objects are not valid as a React child

View fix

Browse all error fixes