Slide 1
-----------
Slide 2
-----------
Part 1: The useRef hook in React provides a way to persist values across renders without causing a re-render. It is primarily used for:
Part 2: Accessing DOM elements (like input fields or divs).
Part 3: Storing mutable values that do not trigger re-renders. LEt's take a look at some common uses of useRef.
Slide 3
-----------
Part 1: Let's talk about some key points about useRef.
Part 2: useRef returns a mutable object with a current property.
Part 3: The current property can hold either a DOM element reference or a mutable value that persists across renders.
Slide 4
-----------
Part 1: The most common use of useRef is to access the DOM elements.
Part 2: useRef(null) creates a reference object.
Part 3: The ref attribute assigns the DOM node to inputRef-current.
Part 4: In useEffect, after the component renders in the browser, inputRef-current-focus focuses the input field.
Slide 5
-----------
Part 1: You can use useRef to store a value that does not trigger re-renders when updated. How it works?
Part 2: useRef holds the value of renderCount and persists it across renders. You can see that the initial value is two, since we run React in Strict development mode, which renders each component twice. In production, this would be 1.
Part 3: Updating renderCount.current does not trigger a re-render.
Part 4: Clicking the button only triggers a re-render due to state (setCount), and renderCount continues to persist.
Slide 6
-----------
Part 1: You can use useRef to store the previous value of a prop or state. How it work?
Part 2: useRef stores the previous value of count
Part 3: useEffect updates prevCount-current after every render
Part 4: The previous value persists across renders without causing additional updates
Slide 7
-----------
Part 1: To summarise. useRef is similar to useState as it preserves the value across multiple re-renders, the main difference is that storing value in ref does not cause re-renders. useRef is versatile for DOM access, storing values, and tracking previous states. Consequently, it helps optimise performance by avoiding unnecessary re-renders.
UNDERSTANDING USEREF IN REACT
The useRef hook in React provides a way to persist values across renders without
causing a re-render. It is primarily used for:
1. Accessing DOM elements (like input fields or divs).
2. Storing mutable values that do not trigger re-renders.
--------------------------------------------------------------------------------
KEY POINTS ABOUT USEREF
* useRef returns a mutable object with a current property:
const myRef = useRef(initialValue);
* The current property can hold:
* A DOM element reference.
* A mutable value that persists across renders.
--------------------------------------------------------------------------------
EXAMPLE 1: ACCESSING DOM ELEMENTS
This is the most common use case for useRef.
CODE EXAMPLE:
import React, { useRef, useEffect } from "react";
const DomRefDemo = () => {
const inputRef = useRef(null);
useEffect(() => {
// Focus the input field on component mount
inputRef.current.focus();
}, []);
return (
<div>
<h1>useRef Example: DOM Access</h1>
<input ref={inputRef} type="text" placeholder="I will be focused on load" />
</div>
);
};
export default DomRefDemo;
--------------------------------------------------------------------------------
HOW IT WORKS:
1. useRef(null) creates a reference object.
2. The ref attribute assigns the DOM node to inputRef.current.
3. In useEffect, inputRef.current.focus() focuses the input field.
--------------------------------------------------------------------------------
EXAMPLE 2: STORING MUTABLE VALUES WITHOUT RE-RENDERING
You can use useRef to store a value that does not trigger re-renders when
updated.
CODE EXAMPLE:
import React, { useRef, useState } from "react";
const MutableRefDemo = () => {
const renderCount = useRef(1);
const [count, setCount] = useState(0);
// Increment renderCount on each re-render
renderCount.current += 1;
return (
<div>
<h1>useRef Example: Mutable Values</h1>
<p>Component Re-rendered: {renderCount.current} times</p>
<p>State Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment Count</button>
</div>
);
};
export default MutableRefDemo;
--------------------------------------------------------------------------------
HOW IT WORKS:
1. useRef holds the value of renderCount and persists it across renders.
2. Updating renderCount.current does not trigger a re-render.
3. Clicking the button only triggers a re-render due to state (setCount), and
renderCount continues to persist.
--------------------------------------------------------------------------------
EXAMPLE 3: PRESERVING PREVIOUS STATE OR VALUE
You can use useRef to store the previous value of a prop or state.
CODE EXAMPLE:
import React, { useEffect, useRef, useState } from "react";
const PreviousValueDemo = () => {
const [count, setCount] = useState(0);
const prevCount = useRef(count);
useEffect(() => {
prevCount.current = count; // Update the ref value after render
}, [count]);
return (
<div>
<h1>useRef Example: Preserve Previous State</h1>
<p>Current Count: {count}</p>
<p>Previous Count: {prevCount.current}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default PreviousValueDemo;
--------------------------------------------------------------------------------
HOW IT WORKS:
1. useRef stores the previous value of count.
2. useEffect updates prevCount.current after every render.
3. The previous value persists across renders without causing additional
updates.
--------------------------------------------------------------------------------
WHEN TO USE <STRONG>USEREF</STRONG>
1. Accessing DOM elements: For direct manipulation of DOM nodes.
2. Storing values: To persist mutable values across renders without triggering
re-renders.
3. Tracking previous values: Store and retrieve prior state/props.
--------------------------------------------------------------------------------
KEY DIFFERENCES BETWEEN USEREF AND USESTATE:
FeatureuseRefuseStateTriggers Re-render❌ No✅ YesMutable✅ Yes (via current)✅ Yes
(but causes re-render)UsageDOM access, persisting valuesState management,
triggering re-renders
--------------------------------------------------------------------------------
SUMMARY
* useRef is versatile for DOM access, storing values, and tracking previous
states.
* It helps optimize performance by avoiding unnecessary re-renders.
Let me know if you need more examples or further explanation! 🚀
Maggie is a generative AI that can help you understand the course content better. You can ask her questions about the lecture, and she will try to answer them. You can also see the questions asked by other students and her responses.
Join the discussion to ask questions, share your thoughts, and discuss with other learners
SkillPies