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
related reading
- React useRef() Hook Explained in 3 Stepsdmitripavlutin.com
- Understanding useMemo and useCallback • Josh W. Comeaujoshwcomeau.com
- ALL React Hooks Explained in 12 Minutesyoutube.com
- Why React Re-Renders • Josh W. Comeaujoshwcomeau.com
- You Might Not Need an Effect – Reactreact.dev
- Build your own Reactpomb.us
- Implementing React from scratchrob.directory
- When does React re-render components? | Felix Gerschaufelixgerschau.com
- Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior · Mark's Dev Blogblog.isquaredsoftware.com
- Reusing Logic with Custom Hooks – Reactreact.dev
- Making setInterval Declarative with React Hooks — overreactedoverreacted.io
- useEffect – Reactreact.dev