Group 1: The Modern Fundamentals

Focus: Core mechanics and the "React Way" of thinking.

What exactly is JSX?

It’s not HTML. It’s a syntax extension for JavaScript that allows us to write UI structures that look like HTML but are actually compiled into standard JavaScript objects.

How does React’s "One-Way Data Flow" work?

Data only moves down (Parent to Child) via props. If a child needs to talk back to a parent, it uses a callback function. This makes debugging 10x easier because you always know where data comes from.

What is a "Pure Component" in functional React?

A component is "pure" if it renders the same output for the same props and has no side effects (like changing a global variable) during the render phase.

Explain the "Component Lifecycle" in 2026.

We don't think in "Mount/Unmount" as much anymore. We think in Synchronizing: "When this data changes, what part of the UI or external system needs to stay in sync?"

What is the difference between a Controlled and Uncontrolled component?

Controlled: React drives the value (via useState).
Uncontrolled: The DOM drives the value (via useRef). Use controlled for validation, uncontrolled for simple, high-performance forms.

Group 2: Hooks & State Logic

Focus: Managing data and side effects efficiently.

Why do we need `useEffect`?

To "step outside" of React. If you need to talk to a Browser API, a manual WebSocket, or a non-React library, useEffect is your bridge.

What is the "Snapshot" concept in State?

When you call setCount(count + 1), it doesn't change the variable now. It tells React to re-render with a new "snapshot" of that value for the next frame.

When would you choose `useReducer` over `useState`?

When your state transitions are complex. If changing "UserStatus" also needs to reset "Timer" and "Score," a reducer keeps that logic in one clean function instead of five scattered useState calls.

What is the benefit of Custom Hooks?

Dry (Don't Repeat Yourself) logic. If three different components need to track "Window Resize," you wrap that logic in useWindowSize and share it.

How does `useRef` persist data without re-rendering?

A Ref is just a plain JavaScript object { current: ... } that stays in memory for the life of the component. Changing it doesn't trigger a UI update, making it perfect for storing timers or DOM nodes.

Group 3: React 19 & The "New Standard"

Focus: The latest features that define modern development.

What is the "React Compiler" (React Forget)?

It’s a build-time tool that automatically optimizes your code. It ensures components only re-render when they absolutely have to, without you having to manually write memo or useCallback.

Explain the new `useOptimistic` hook.

It allows you to show the "Success" state of an action (like liking a post) immediately, then automatically roll it back if the server request actually fails.

How do "Server Actions" handle security?

Since they run on the server, you can perform database queries and sensitive logic directly inside the function without exposing your API endpoints or secrets to the browser.

What is the "Hydration" process?

It’s when the browser takes the static HTML sent by the server and "attaches" the JavaScript event listeners to it, making the page interactive.

What is the `useFormStatus` hook?

It’s a specialized hook that gives you the pending status of a parent <form>, allowing you to disable buttons or show spinners without passing props down.

Group 4: Performance & Architecture

Focus: Scaling, debugging, and expert-level patterns.

What is "Code Splitting" and why use `React.lazy`?

It breaks your giant app into smaller chunks. Users only download the "Settings Page" code when they actually click on Settings, making the initial load much faster.

How does `Suspense` improve User Experience?

It allows you to declaratively define a "Loading State" for a component tree. While the data is fetching, React shows your fallback (like a skeleton screen) automatically.

What is the "Double Buffer" rendering in React Fiber?

React works on a "work-in-progress" tree in the background. Once the whole tree is ready, it swaps it with the current UI instantly, preventing the user from seeing a partially rendered screen.

Explain "Strict Mode" and why it renders components twice in Dev.

It’s a safety check. By rendering twice, React helps you find "Impure" code or side effects that shouldn't be happening during the render phase.

Why are "Portals" useful for Modals and Tooltips?

They let you render a component into a different part of the HTML (like the very end of the <body>). This prevents CSS overflow: hidden or z-index issues from the parent component from cutting off your modal.

React Interview Guide: Master Modern React in 2026