Scribd
Upload
20 views

53 - Useref Mutable

The document discusses the useRef hook in React. It can be used to 1) access DOM elements directly and 2) store mutable values that don't cause re-renders when updated. The useRef hook allows persisting values between renders by returning an object with a .current property initialized to the passed argument. Unlike useState, useRef does not cause re-renders when the .current value is updated, making it useful for things like avoiding infinite loops during re-renders.

Uploaded by

itprabhu.automation
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
20 views

53 - Useref Mutable

The document discusses the useRef hook in React. It can be used to 1) access DOM elements directly and 2) store mutable values that don't cause re-renders when updated. The useRef hook allows persisting values between renders by returning an object with a .current property initialized to the passed argument. Unlike useState, useRef does not cause re-renders when the .current value is updated, making it useful for things like avoiding infinite loops during re-renders.

Uploaded by

itprabhu.automation
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 7

PART-53

useRef Hook
REACT
PRESENTER: MOHAMMAD ADIL
Pre-Requisites REACT

• useState
• useEffect
• useRef
Humble Request REACT

Techno Verse YT

Heavenly Delicious
useRef Hook REACT

• 1. It can be used to access a DOM element directly.


useRef Hook REACT

• 2. It can be used to store a mutable value that does not cause a re-
render when updated.
• The useRef Hook allows you to persist values between renders.
• The useRef Hook is a function that returns a mutable ref object whose
.current property is initialized with the passed argument
(initialValue).
• The returned object will persist for the full lifetime of the
component.
Does Not Cause Re-renders REACT

• If we tried to count how many times our application renders using the
useState Hook, we would be caught in an infinite loop since this Hook
itself causes a re-render.
• To avoid this, we can use the useRef Hook.
useRef Hook REACT

• useRef() only returns one item. It returns an Object called current.


• When we initialize useRef we set the initial value: useRef(0).
• It's like doing this: const count = {current: 0}. We can access the
count by using count.current.

You might also like