🔐 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:

Task Time Estimate
Form design & state setup 1-2 hours
Debounced auto-save logic 2 hours
API integration 1 hour
Unit tests (Jest + RTL) 2-3 hours
Bug fixing + polish 1 hour
Total 7–9 hours (1 working day)

☁️ 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!