React 성과 체크리스트

⚡ React Performance Checklist — What Senior Frontend Developers Actually Optimize

Performance isn’t about using every optimization hook.

It’s about identifying the real bottleneck and fixing it.

Measure first. Optimize second.

Here’s a practical checklist I follow for production React applications.

🧠 1️⃣ Prevent Unnecessary Re-renders

Before optimizing anything, ask:

👉 Why is this component re-rendering?

Use:

• React DevTools Profiler
• Why Did You Render (during development)

Don’t optimize blindly.

⚛️ 2️⃣ Memoize Components Only When Needed

Use:

React.memo(Component)

Enter fullscreen mode Exit fullscreen mode

Good for:

✔ Large lists

✔ Expensive components

✔ Components with stable props

❌ Don’t wrap every component with React.memo.

The comparison itself has a cost.

🪝 3️⃣ Use useMemo for Expensive Calculations

Good:

const sortedUsers = useMemo(() => {
  return users.sort(sortByName);
}, [users]);

Enter fullscreen mode Exit fullscreen mode

Use it for:

• Sorting
• Filtering
• Large calculations

❌ Don’t memoize simple expressions.

🔄 4️⃣ Use useCallback Only When Necessary

Good:

const handleSave = useCallback(() => {
  saveUser();
}, []);

Enter fullscreen mode Exit fullscreen mode

Useful when:

• Passing callbacks to memoized children
• Using callbacks in dependency arrays

❌ It doesn’t automatically make your app faster.

📦 5️⃣ Keep State Close to Where It’s Used

Bad:

App
 ├── State
 ├── Navbar
 ├── Sidebar
 ├── Dashboard
 └── Footer

Enter fullscreen mode Exit fullscreen mode

Every state update may affect large parts of the tree.

Better:

Dashboard
 └── Dashboard State

Enter fullscreen mode Exit fullscreen mode

👉 Smaller update scope.

📋 6️⃣ Virtualize Large Lists

Don’t render:

10,000 rows

Enter fullscreen mode Exit fullscreen mode

Render only what’s visible.

Libraries:

• react-window
• react-virtualized

Huge performance improvement.

🌐 7️⃣ Optimize Data Fetching

Avoid:

❌ Duplicate API calls

Use:

✔ Caching

✔ Pagination

✔ Infinite scrolling

Libraries like:

• TanStack Query (React Query)
• SWR

🖼️ 8️⃣ Lazy Load Components

Instead of downloading everything:

const Settings = React.lazy(() => import("./Settings"));

Enter fullscreen mode Exit fullscreen mode

Combine with:

<Suspense fallback={<Spinner />} />

Enter fullscreen mode Exit fullscreen mode

👉 Smaller initial bundle.

🎯 9️⃣ Optimize Images

✔ WebP / AVIF

✔ Responsive images

✔ Lazy loading

<img loading="lazy" />

Enter fullscreen mode Exit fullscreen mode

Images are often the biggest contributor to page weight.

🧩 🔟 Code Split Your Application

Split bundles by:

• Routes
• Features
• Large components

Instead of:

main.js (3 MB)

Enter fullscreen mode Exit fullscreen mode

Load only what’s needed.

🧠 1️⃣1️⃣ Avoid Expensive Work During Render

Bad:

const users = bigArray.sort();

Enter fullscreen mode Exit fullscreen mode

This runs on every render.

Better:

Use useMemo or move the work outside the render path.

🖱️ 1️⃣2️⃣ Debounce & Throttle Events

Don’t call APIs on every keystroke.

Instead:

✔ Debounce search input

✔ Throttle scroll/resize events

⚡ 1️⃣3️⃣ Batch State Updates

Instead of:

setName(name);
setAge(age);
setCity(city);

Enter fullscreen mode Exit fullscreen mode

React batches many state updates automatically, reducing unnecessary renders. Understanding batching helps you avoid accidental performance issues.

🌍 1️⃣4️⃣ Use the Right Rendering Strategy

Choose based on the application:

✔ CSR

✔ SSR

✔ SSG

✔ React Server Components

Don’t use one strategy everywhere.

📊 1️⃣5️⃣ Measure Core Web Vitals

Monitor:

✔ LCP (Largest Contentful Paint)

✔ INP (Interaction to Next Paint)

✔ CLS (Cumulative Layout Shift)

Performance isn’t just about React—it affects SEO and user experience.

🚨 Common Performance Mistakes

❌ Using useMemo everywhere

❌ Wrapping every component in React.memo

❌ Storing all state globally

❌ Rendering thousands of DOM nodes

❌ Making duplicate API requests

❌ Ignoring bundle size

❌ Optimizing without profiling

💡 Senior-Level Insight

The biggest React performance wins usually come from:

✅ Reducing unnecessary renders

✅ Reducing JavaScript shipped to the browser

✅ Reducing network requests

—not from adding more hooks.

🎯 Interview One-Liner

React performance optimization focuses on minimizing unnecessary re-renders, reducing bundle size, optimizing rendering and data fetching, and measuring real bottlenecks before applying techniques like memoization, virtualization, and code splitting.

📌 Senior React Performance Checklist

✅ Profile before optimizing

✅ Prevent unnecessary re-renders

✅ Use React.memo judiciously

✅ Use useMemo for expensive calculations

✅ Use useCallback only when it provides value

✅ Keep state local

✅ Virtualize large lists

✅ Cache API requests

✅ Lazy load components

✅ Optimize images

✅ Code split routes

✅ Debounce expensive events

✅ Measure Core Web Vitals

ReactJS #Frontend #JavaScript #Performance #WebPerformance #Optimization #InterviewPrep #EngineeringMindset