🔷 React Versions – What Came in Each

Summary Table

🔹 React 15 (Before 2017)

✅ What came:

1. Stack Reconciliation (sync rendering)
2. Class components lifecycle:
3. componentDidMount, componentWillReceiveProps, etc.

❗ Limitations:

1. Blocking UI (no async rendering)
2. Poor performance for large apps

🎯 Why it matters:

“This version had synchronous rendering, which caused performance issues in complex applications.”

🔹 React 16 (Fiber) 🚀

🔥 Major Change:

👉 Fiber Architecture (complete rewrite)

✅ What came:

1. Async / Incremental Rendering (foundation)

1. Can pause, resume work

2. Error Boundaries

3. Fragments

4. Portals

5. New lifecycle methods

1. getDerivedStateFromProps
2. getSnapshotBeforeUpdate

🎯 Why it matters:

“React 16 made rendering interruptible and improved error handling.”

🔹 React 16.8 (Hooks) 🔥

🔥 Biggest Developer Experience Change

✅ What came:

1. useState
2. useEffect
3. useContext
4. useMemo
5. useCallback
6. useReducer
7. useRef

🎯 Why it matters:

“Hooks replaced class components for most use cases and enabled better logic reuse.”

🔹 React 17 (2020)

🔥 Focus:

👉 No new features, smoother upgrades

✅ What came:

1. New JSX Transform

1. No need to import React

2. Event System Changes

1. Delegation moved to root

3. Gradual upgrade support

🎯 Why it matters:

“React 17 made upgrades easier and reduced breaking changes.”

🔹 React 18 (VERY IMPORTANT) 🚀

🔥 Main Theme:

👉 Concurrent Rendering

✅ What came:

1. Automatic Batching

Before:

1. batching only in events

Now:

1. batching everywhere (even async)

2. useTransition

👉 mark low-priority updates

3. useDeferredValue

👉 delay non-urgent UI updates

4. Suspense (Improved)

1. Better async handling

5. New Root API

6. Strict Mode Enhancements

1. Double rendering (dev only)

🎯 Why it matters:

“React 18 improves performance and responsiveness using concurrent features.”

🔹 React 19 (Latest Direction)

🔥 Focus:

👉 Reduce client work + smarter rendering

✅ What came:

1. React Compiler

1. Auto optimization
2. Less need for useMemo/useCallback

2. Server Components

1. Run on server
2. Reduce bundle size

3. Actions (Forms)

4. Improved Suspense + Streaming

🎯 Why it matters:

“React is moving toward server-driven UI and automatic optimizations.”

🔷 Clean Summary Table

🔥 Best Interview Answer (Short + Strong)

“React 15 used synchronous stack reconciliation. React 16 introduced Fiber, enabling asynchronous rendering and features like error boundaries. React 16.8 introduced hooks, which transformed how we write components. React 17 focused on internal improvements and smoother upgrades. React 18 introduced concurrent rendering features like automatic batching, useTransition, and useDeferredValue. Recent versions like React 19 focus on server components and compiler-based optimizations.”

🔴 Common Mistakes (Avoid These)

❌ Saying hooks came in React 17

❌ Saying Suspense came only in React 18

❌ Ignoring Fiber

❌ Not mentioning concurrent rendering

🚀 Next Step (High Impact)

Now you’re ready for:

🔥 React Rendering Deep Dive (how re-renders actually happen)

🔥 useEffect Tricky Scenarios (most asked)

🔥 Real-world performance issues

Or I can:

👉 Give React scenario-based interview questions (very important for Cognizant)