3 React Core Hooks: useEffect, useRef, useState

Anni Huang

1 min read

Anni Huang

·

1 min read

Table of contents

1. useEffect- Run code after render (side effects)
- ✅ Use when:
2. useState – Track local component state (re-render)
- ✅ Use when:
3. useRef – Keep a mutable reference without triggering re-render (without triggering re-render)
- ✅ Use when:
🧠 Summary: When to use what?

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.

hooks hook hooks in react Next.js useState useRef useEffect

Written by

Anni Huang

Anni Huang

Anni Huang

I’m Anni Huang, an AI researcher-in-training currently at ByteDance, specializing in LLM training operations with a coding focus. I bridge the gap between engineering execution and model performance, ensuring the quality, reliability, and timely delivery of large-scale training projects.