React Frontend L2 Round Interview Question & Answer

🔐 What security features should be taken while designing APIs?

• Authentication & Authorization: Use OAuth 2.0, JWTs, or API keys properly.
• Rate Limiting & Throttling: Protect from abuse (e.g., DDoS).
• Input Validation & Sanitization: Prevent SQL Injection, XSS, etc.
• HTTPS Only: Always encrypt data in transit.
• CORS Configuration: Only allow trusted origins.
• Avoid Sensitive Data in URLs: Use headers/body instead.
• Logging & Monitoring: Track suspicious activity.
• Use Secure Headers: Like Content-Security-Policy, X-Frame-Options, etc.

💠 What is API throttling?

API Throttling is the process of limiting the number of API requests a user/client can make within a specific time frame to prevent abuse and manage load.

Example:

Only allow 100 requests per minute per user.

⚡ How to improve the performance in React Application?

• Code-splitting using React.lazy + Suspense
• Memoization: Use React.memo, useMemo, and useCallback
• Avoid unnecessary re-renders
• Virtualization: Libraries like react-window for large lists
• Lazy loading images/components
• Efficient state management: Don’t overuse global state
• Use production builds (npm run build)

⏱️ What is debouncing in React?

Debouncing is a performance optimization technique where a function (e.g., API call) is delayed until a specified time has passed since the last time it was invoked.

Example:

When typing in a search input, only call API after the user stops typing for, say, 500ms.

Use:

import debounce from 'lodash.debounce';

💾 What if in a React app we need to develop a feature of auto-save the inputs of a form?

You can use:

• useEffect with debounce
• localStorage or API POST inside the debounce
• Change tracking to only save when data changes

Example logic:

useEffect(() => {
  const timeout = setTimeout(() => {
    saveData(formData); // API call
  }, 1000);
  return () => clearTimeout(timeout);
}, [formData]);

📊 Which React library is used to represent JSON data into charts/graphs for better visualization and performance?

• Recharts (based on D3.js, best for React)
• Victory
• Chart.js with react-chartjs-2
• Nivo
• Highcharts (commercial)

For performance & customization, Recharts is often preferred.

📣 If you have to inform backend developers about some APIs are failing, how will you do that?

• Use error logging tools (Sentry, LogRocket)
• Maintain a shared Slack/Discord/Notion channel
• Document API issue with:
  • Endpoint name
  • Expected vs. actual response
  • Status code
  • Reproduction steps
  • Screenshots (if needed)
• Bonus: Automate alerts using tools like Postman Monitors, Pingdom, PagerDuty

🧰 Which tool is used to improve code standards in React to show warnings?

• ESLint (with React-specific plugins)
• Prettier (for formatting consistency)
• Stylelint (for CSS-in-JS or SCSS)

These show warnings during development and can be integrated with CI/CD.

🧪 What are the unit testing tools used in React Application?

• Jest (test runner + assertion)
• React Testing Library (focuses on user interactions)
• Enzyme (older, less recommended now)
• Cypress (for E2E testing, but also supports component tests)

🧱 How do you handle API test case scenarios in React Application?

• Mock APIs using msw (Mock Service Worker)
• Use jest to spy on fetch/axios
• Test cases include:
  • Successful API call
  • Loading state
  • Error handling (network or validation)
  • Retry logic (if any)
  • Response rendering

⏳ Give me an estimation of completing an auto-save functionality with unit testing?

Let’s break it down:

☁️ Which cloud is used in your app development?

Depends on the stack. Common ones:

• Firebase (Firestore, Auth, Storage) for serverless apps
• AWS (EC2, Lambda, RDS, S3, etc.)
• Vercel (for hosting Next.js apps)
• GCP or Azure for enterprise apps

You can mention the specific services you're using in your project if you want it to be more tailored.

If you’d like, I can help you prep this as a doc or interview cheat sheet!