3 React Core Hooks: useEffect, useRef, useState
Anni Huang1 min read
1. useEffect- Run code after render (side effects)
✅ Use when:
- Fetching data after page load
- Accessing window, localStorage, or other browser APIs
- Setting up timers, subscriptions, or event listeners
2. useState – Track local component state (re-render)
✅ Use when:
- Managing form inputs
- Storing toggles, counters, fetched data
- Triggering re-renders on state changes
3. useRef – Keep a mutable reference without triggering re-render (without triggering re-render)
✅ Use when:
- Accessing a DOM element directly (e.g., input focus)
- Storing a value that persists between renders without triggering re-render
- Avoiding stale closures (e.g., in
setInterval)
🧠 Summary: When to use what?
| Hook | Use it for... | Triggers re-render? |
useEffect | Running side effects after render | No |
useState | Tracking and updating component state triggering re-renders | Yes |
useRef | Storing mutable data or accessing DOM elements without triggering re-render | No |
0
Subscribe to my newsletter
Read articles from Anni Huang directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Anni Huang
Anni Huang
I am Anni HUANG, a software engineer with 3 years of experience in IDE development and Chatbot.