React Refs: Memory Without Re-renders
A React ref is like a secret pocket for your component to remember information without triggering re-renders. Use it to hold values not needed for rendering, like a timer ID. The footgun: changing a ref's value won't update the UI; use state for that.
Think of a React ref as a secret pocket for your component to remember information without triggering re-renders. Unlike state, updating a ref's `.current` property is mutable and doesn't cause a re-render, making it an "escape hatch" from React's data flow. It's perfect for storing values not used in rendering, like a timer ID from `setInterval`. The footgun is assuming a ref update will refresh the UI; if the screen needs to change, you must use state.
Read the original → react.dev
- #react
- #hooks
- #state management
- #refs
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.