React useRef Hook By Example: A Complete Guide
The React.useRef Hook is used for referencing DOM nodes and persisting a mutalbe value across rerenders. This is an interactive guide to useRef with real-world examples.
React useRef Hook By Example: A Complete Guide React useRef Hook By Example: A Complete Guide Linton Ye Last Updated: 2021-03-07 table of contents What is useRef used for? Directly access DOM nodes Persist a mutable value across rerenders The mental model of useRef The "rerendering time loop" Component instances Example 1: previous value / state Example 2: stopwatch (clear interval) Example 3: Press and hold to repeat Anti-patterns Assign to ref.current in render Use ref.current in JSX and expect it to be reactive Quiz & Related concepts ref and useRef useRef vs. useState useRef vs. createRef
Explore this link on the map →related reading
- React useRef() Hook Explained in 3 Stepsdmitripavlutin.com
- 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
- Why React Re-Renders • Josh W. Comeaujoshwcomeau.com
- Making setInterval Declarative with React Hooks — overreactedoverreacted.io
- State as a Snapshot – Reactreact.dev
- React graph viscrubier.github.io
- The Interactive Guide to Rendering in Reactui.dev
- Implementing React from scratchrob.directory
- What is Memoization? How and When to Memoize in JavaScript and Reactfreecodecamp.org