React Interview Study Guide for Java Full Stack Developers

Interview Focus Areas

For a senior Java Full Stack role, React interviews typically emphasize:

• React fundamentals
• Components and JSX
• Hooks
• State management
• Component lifecycle
• Performance optimization
• Routing
• API integration
• JWT authentication
• React architecture
• React + Spring Boot integration

---

React Fundamentals

What is React?

React is a JavaScript library for building user interfaces using reusable components.

Features

• Component-based architecture
• Virtual DOM
• One-way data flow
• Declarative programming

function Welcome() {
  return <h1>Hello World</h1>;
}

What is the Virtual DOM?

Virtual DOM is a lightweight in-memory representation of the Real DOM.

Rendering Flow

flowchart TD
A[State Changes] --> B[Create New Virtual DOM]
B --> C[Compare with Previous Virtual DOM]
C --> D[Find Differences]
D --> E[Update Only Changed Nodes in Real DOM]

Benefits

• Faster rendering
• Fewer DOM manipulations
• Better performance

Real DOM vs Virtual DOM

Real DOM	Virtual DOM
Slow	Fast
Updates entire DOM	Updates only changed nodes
Browser dependent	JavaScript object
More memory intensive	Efficient

---

Components

Functional Component

function User() {
  return <h1>User</h1>;
}

Class Component (Legacy)

class User extends React.Component {
  render() {
    return <h1>User</h1>;
  }
}

Functional components are preferred today.

---

JSX

JSX allows HTML-like syntax inside JavaScript.

const element = <h1>Hello</h1>;

JSX is compiled into JavaScript by Babel.

---

Props and State

Props

Read-only values passed from parent to child.

function Employee(props) {
  return <h1>{props.name}</h1>;
}

<Employee name="Abirami" />

State

Stores mutable component data.

const [count, setCount] = useState(0);

Props	State
Read-only	Mutable
Parent-owned	Component-owned
External	Internal

---

React Hooks

useState

useState lets functional components store and update local state, triggering a re-render on change. See the React useState Interview Guide for update batching, functional updates, lazy initialization, and immutability rules.

useEffect

Used for side effects such as API calls, timers, and subscriptions. See the React useEffect Interview Guide for dependency-array behavior, cleanup functions, stale closures, and useEffect vs useLayoutEffect.

Lifecycle Using Hooks

useEffect replaces componentDidMount, componentDidUpdate, and componentWillUnmount depending on its dependency array. See the React Lifecycle Using Hooks guide for a full walkthrough with execution order and cleanup timing.

useRef

useRef stores a mutable value that persists across renders without triggering a re-render when updated. Useful for DOM access and mutable values. See the React useRef Interview Guide for persistence mechanics, forwardRef/useImperativeHandle, and avoiding stale closures.

useMemo

useMemo caches the result of an expensive computation and recomputes it only when its dependencies change. See the React useMemo Interview Guide for dependency-array behavior, the React.memo interaction, and why it isn’t a correctness guarantee.

useCallback

useCallback memoizes a function reference between renders. See the React useCallback Interview Guide for the stale closure problem, React.memo interaction, and dependency-array pitfalls.

Caches function references.

useMemo vs useCallback

useMemo	useCallback
Caches values	Caches functions

Rules of Hooks

• Call hooks only at the top level.
• Never call hooks inside loops or conditions.
• Use hooks only inside React components or custom hooks.

Bad:

if (user) {
  useEffect(() => {}, []);
}

Good:

useEffect(() => {
  if (user) {
    // logic
  }
}, [user]);

---

React.memo

export default React.memo(User);

Prevents unnecessary re-renders when props remain unchanged.

---

Context API

const UserContext = createContext();

Used to avoid prop drilling.

See the React Context API Interview Guide for Provider/Consumer patterns, re-render behavior, Context vs Redux, and performance optimization with useMemo.

---

Routing

React Router provides Single Page Application (SPA) navigation without full page reloads. See the React Routing Interview Guide for BrowserRouter vs HashRouter, nested routes, navigation hooks, protected routes, and query parameters.

---

API Integration

Fetch API

useEffect(() => {
  fetch("/api/users")
    .then(res => res.json())
    .then(data => setUsers(data));
}, []);

Axios

axios.get("/api/users");

Error Handling

try {
  const response = await axios.get("/users");
} catch (error) {
  console.error(error);
}

---

React Keys

users.map(user => (
  <li key={user.id}>{user.name}</li>
));

Keys uniquely identify list elements during reconciliation.

---

Performance Optimization

Techniques:

• React.memo
• useMemo
• useCallback
• Lazy Loading
• Code Splitting
• Pagination
• Debouncing
• Virtualization

---

Lazy Loading

React.lazy and Suspense load components on demand instead of bundling them upfront. See the React Code Splitting Interview Guide for route-based splitting, dynamic imports, and the internal chunk-loading flow.

---

Project Structure

src/
- components/
- pages/
- services/
- hooks/
- context/
- utils/
- routes/
- assets/
- App.jsx

---

Senior-Level Interview Questions

Why does React use Virtual DOM?

React minimizes expensive DOM operations by comparing Virtual DOM trees and updating only changed nodes.

Explain React Reconciliation

flowchart LR
A[Old Virtual DOM] --> B[Compare]
C[New Virtual DOM] --> B
B --> D[Diff]
D --> E[Update Changed Nodes]

React assumes:

• Different element types produce different trees.
• Stable keys uniquely identify children.

Controlled vs Uncontrolled Components

Controlled

const [name, setName] = useState("");

<input
  value={name}
  onChange={(e) => setName(e.target.value)}
/>

Uncontrolled

const inputRef = useRef();

<input ref={inputRef} />

Controlled components are preferred in enterprise applications.

---

React Batching

React combines multiple state updates into a single render for better performance.

React 18 performs automatic batching even for asynchronous operations.

---

Avoiding Unnecessary Re-renders

• React.memo
• useMemo
• useCallback
• Keep state local
• Virtualized rendering

---

Designing a Reusable Component Library

Recommended structure:

components/
- Button
- Input
- Modal
- Table
- Dropdown

Design principles:

• Reusable
• Configurable
• Accessible
• Themeable
• Well documented

---

Security

Best practices:

• Never store secrets in frontend code.
• Use HTTPS.
• Prevent XSS.
• Prefer HttpOnly cookies for JWT.
• Validate input on both frontend and backend.
• Implement Role-Based Access Control (RBAC).

---

JWT Authentication with Spring Boot

React authenticates against Spring Boot by sending credentials, storing the returned JWT, and attaching it as a Bearer token on every subsequent request via an Axios interceptor.

Production recommendations:

• Short-lived access tokens
• Refresh tokens
• HttpOnly cookies

See the React + Spring Boot Integration Interview Guide for the full JWT sequence diagram, Axios interceptor code, CORS configuration, centralized error handling, file upload/download, and deployment strategies.

---

React with Spring Boot Microservices

flowchart TD
A[React UI] --> B[API Gateway]
B --> C[User Service]
B --> D[Order Service]
B --> E[GST Service]

API:

axios.get("/api/users");

Handle:

• CORS
• JWT
• Global error handling

---

React Fiber

React Fiber is the rendering engine introduced in React 16.

Benefits:

• Incremental rendering
• Task prioritization
• Concurrent rendering
• Better responsiveness

---

Code Splitting

Code splitting breaks a large JavaScript bundle into smaller chunks loaded on demand, reducing initial load time. See the React Code Splitting Interview Guide for implementation techniques, vendor splitting, and bundle analysis.

---

Handling Large Tables

Recommended approaches:

• Server-side pagination
• Infinite scrolling
• Virtualization
• Lazy loading

---

Topics Every Senior Java Full Stack Developer Should Know

See the React Interview Topics roadmap for the full priority breakdown and interview frequency of each topic.

Summary

• Master React fundamentals before advanced optimization.
• Understand Hooks deeply, especially useEffect, useMemo, useCallback, and useRef.
• Be comfortable integrating React with Spring Boot using REST APIs and JWT authentication.
• Learn performance optimization techniques including reconciliation, memoization, lazy loading, and virtualization.
• Prepare architectural discussions around reusable components, security, routing, and project structure.