React useRef() Hook Explained in 3 Steps

React.useRef() hook creates persisted mutable values (aka references or refs). refs are used to access DOM elements.

React useRef() Hook Explained in 3 Steps Updated April 3, 2023 react useref hook dom element -- Comments In this post you'll learn how to use React.useRef() hook to create persisted mutable values (also known as references or refs), as well as access DOM elements. Table of Contents 1. Mutable values 1.1 Use case: logging button clicks 1.2 Use case: implementing a stopwatch 2. Accessing DOM elements 2.1 Use case: focusing on an input 3. Updating references restriction 4. Summary 1. Mutable values useRef(initialValue) is a built-in React hook that accepts one argument as the initial value and re

related reading

• React useRef Hook By Example: A Complete Guidelearnreact.design
• You Might Not Need an Effect – Reactreact.dev
• Understanding useMemo and useCallback • Josh W. Comeaujoshwcomeau.com
• ALL React Hooks Explained in 12 Minutesyoutube.com
• Build your own Reactpomb.us
• Why React Re-Renders • Josh W. Comeaujoshwcomeau.com
• When does React re-render components? | Felix Gerschaufelixgerschau.com
• Implementing React from scratchrob.directory
• Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior · Mark's Dev Blogblog.isquaredsoftware.com
• useEffect – Reactreact.dev
• State as a Snapshot – Reactreact.dev
• Reusing Logic with Custom Hooks – Reactreact.dev