React + Spring Boot Integration Interview Guide

Architecture

React communicates with Spring Boot using REST APIs (or GraphQL).

flowchart TD
    A[React UI] --> B[Axios / Fetch API]
    B --> C[Spring Boot REST Controller]
    C --> D[Service Layer]
    D --> E[(Database)]

Example

React

axios.get("/api/users")
     .then(res => setUsers(res.data));

Spring Boot

@RestController
@RequestMapping("/api/users")
public class UserController {

    @GetMapping
    public List<User> getUsers() {
        return userService.getAllUsers();
    }
}

Cross-Origin Resource Sharing (CORS)

When React and Spring Boot run on different ports:

React : localhost:3000
Spring Boot : localhost:8080

The browser blocks requests because of the Same Origin Policy.

Controller-level configuration

@CrossOrigin(origins = "http://localhost:3000")
@RestController
public class UserController {
}

Global configuration

@Configuration
public class CorsConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("http://localhost:3000");
            }
        };
    }
}

Authentication with JWT

sequenceDiagram
    participant U as User
    participant R as React
    participant S as Spring Boot
    U->>R: Login
    R->>S: Credentials
    S-->>R: JWT
    R->>R: Store Token
    R->>S: API Request + Authorization Header
    S-->>R: Validate JWT and return response

Authorization header:

Authorization: Bearer JWT_TOKEN

Axios interceptor:

axios.interceptors.request.use(config => {
    config.headers.Authorization =
        `Bearer ${localStorage.getItem("token")}`;
    return config;
});

Where Should JWT Be Stored?

Storage	Pros	Cons
Local Storage	Easy implementation	Vulnerable to XSS
HttpOnly Secure Cookie	More secure, inaccessible to JavaScript	Requires CSRF protection

Enterprise applications typically prefer HttpOnly Secure Cookies.

Centralized API Error Handling

React

axios.interceptors.response.use(
    response => response,
    error => {
        if(error.response.status === 401){
            navigate("/login");
        }
        return Promise.reject(error);
    }
);

Spring Boot

@RestControllerAdvice
public class GlobalExceptionHandler {

    @ExceptionHandler(Exception.class)
    public ResponseEntity<String> handleException(Exception ex) {
        return ResponseEntity.badRequest()
                .body(ex.getMessage());
    }
}

Environment Configuration

Development:

VITE_API_URL=http://localhost:8080

Production:

VITE_API_URL=https://api.company.com

Usage:

const API_URL = import.meta.env.VITE_API_URL;

Avoid hardcoding URLs.

File Upload

React

const formData = new FormData();
formData.append("file", file);

axios.post("/upload", formData);

Spring Boot

@PostMapping("/upload")
public String upload(
        @RequestParam("file") MultipartFile file) {

    return file.getOriginalFilename();
}

File Download

Spring Boot

@GetMapping("/download")
public ResponseEntity<Resource> download() {
    return ResponseEntity.ok(resource);
}

React

const response = await axios.get("/download", {
    responseType: "blob"
});

Pagination

Spring Boot

@GetMapping
public Page<User> getUsers(
        @RequestParam int page,
        @RequestParam int size) {

    return repository.findAll(
            PageRequest.of(page, size));
}

React

axios.get(`/users?page=0&size=10`);

Benefits:

• Faster response
• Reduced memory usage
• Better user experience

Loading State

const [loading, setLoading] = useState(false);

setLoading(true);

axios.get("/users")
    .finally(() => setLoading(false));

{
 loading ? <Spinner/> : <UserList/>
}

API Optimization

Debouncing

useEffect(() => {
   const timer = setTimeout(() => {
      searchUsers();
   }, 500);

   return () => clearTimeout(timer);
}, [searchText]);

Caching

• React Query
• SWR

Securing Spring Boot APIs

• Spring Security
• JWT Authentication
• HTTPS
• Role-Based Access Control
• Input Validation
• CSRF protection (when using cookies)
• Rate Limiting

@PreAuthorize("hasRole('ADMIN')")
@GetMapping("/admin")
public String admin() {
    return "Admin Data";
}

Deployment

Single JAR Deployment

flowchart LR
    A[npm run build] --> B[Copy build output]
    B --> C[src/main/resources/static]
    C --> D[Spring Boot JAR]

npm run build

Copy the build output into:

src/main/resources/static

Application URL:

http://server:8080

Separate Deployment

• React -> Nginx
• Spring Boot -> Docker/Kubernetes

This is the typical enterprise production approach.

Role-Based UI Rendering

const role = getRole();

{
 role === "ADMIN"
    ? <AdminPanel />
    : <UserPanel />
}

Always validate authorization on the backend as well.

Common Integration Challenges

1. CORS issues
2. JWT expiration handling
3. API versioning
4. Large payload performance
5. File upload/download
6. Pagination and lazy loading
7. Role-based authorization
8. Refresh token implementation
9. Network failures
10. Deployment and environment management

Typical enterprise solutions:

• API Gateway
• Axios Interceptors
• Spring Security + JWT
• React Query caching
• CDN for static assets
• Kubernetes deployment

Senior-Level Interview Questions

1. How would you implement Refresh Token flow?
2. How do you secure React applications from XSS attacks?
3. How would you implement SSO using OAuth2/OIDC?
4. How do you manage state in a large React application?
5. How do you version Spring Boot APIs?
6. How do you handle distributed authentication across microservices?
7. How would you integrate React with API Gateway and multiple microservices?
8. How do you implement real-time updates using WebSocket?
9. How do you optimize React application performance for large datasets?
10. How would you design a production-grade React + Spring Boot architecture?

Key Takeaways

• React communicates with Spring Boot primarily through REST APIs using Axios or Fetch.
• Secure integrations typically use Spring Security with JWT and centralized Axios interceptors.
• Enable CORS whenever the frontend and backend run on different origins.
• Production deployments commonly separate React (Nginx/CDN) and Spring Boot (Docker/Kubernetes), though a single JAR deployment is also common.
• Enterprise applications prioritize pagination, caching, centralized error handling, and secure authentication using HttpOnly cookies where appropriate.