Ref Hook

How to Access a Function Component’s Ref

What Exactly Is the useRef() Function?

Syntax of the useRef() Hook

Example 1: Call the useRef Hook without an initialValue argument

Example 2: Call the useRef Hook with an initialValue argument

How to Access the Value Inside a Ref Object

How to use the dot notation to access a ref object’s value

Syntax

Example

How to use the square bracket notation to access a ref object’s value

How to Update the Value Inside a Ref Object

How to use the dot notation to update a ref object’s value

How to use the square bracket notation to update a ref object’s value

Important Things to Know About Accessing and Updating React Refs

Dot vs. square brackets notation

Don’t read or write ref.current during rendering (except for initialization)

React updates refs immediately

How to Use React Refs to Manage DOM Nodes

1. Declare a ref variable with null as the initial value

2. Assign the ref object as the value of your JSX element’s ref attribute

How Does React Ref Hook Work Behind the Scenes?

How Does Updating ref.current Affect the Ref Hook’s State Object?

1. Primitive data types are passed by value to variables

2. Non-primitive data types are passed by reference to variables