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
• Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior · Mark's Dev Blogblog.isquaredsoftware.com
• Understanding useMemo and useCallback • Josh W. Comeaujoshwcomeau.com
• Tutorial: Tic-Tac-Toe – Reactreactjs.org
• State as a Snapshot – Reactreact.dev
• Why React Re-Renders • Josh W. Comeaujoshwcomeau.com
• The Interactive Guide to Rendering in Reactui.dev
• React graph viscrubier.github.io
• Implementing React from scratchrob.directory
• Making setInterval Declarative with React Hooks — overreactedoverreacted.io
• Updating Objects in State – Reactreact.dev