Real Frontend Interview Questions: React, Next.js, JavaScript & TypeScript

These are actual frontend interview questions asked in technical interviews for roles involving React, JavaScript, TypeScript, and Next.js. Each answer is detailed with explanations, examples, and reasoning to help you give confident and relevant responses.

Whether you’re a student, self-taught developer, or experienced engineer preparing for your next frontend role — this guide brings you real-world, interview-proven Q&A.

1. What is React?

React is a JavaScript library developed by Facebook for building user interfaces, especially single-page applications (SPAs). It breaks down the UI into reusable components, uses a virtual DOM to improve rendering efficiency, and ensures predictable data flow with one-way binding. It's widely adopted due to its simplicity, performance, and ecosystem.

2. State Management Techniques in React

State is how React tracks data that changes over time. Different ways to manage state:

• useState for local component state
• useReducer for complex or nested state updates
• Context API for prop drilling elimination and lightweight global state
• External libraries: Redux, Zustand, Recoil — for large-scale state management

3. What is a Higher-Order Component (HOC)?

A Higher-Order Component is a function that takes a component and returns an enhanced component. It’s commonly used for reusing logic like authentication, theming, etc.

Example:

React JSXCopy
1function withAuth(Component) {
2  return function AuthComponent(props) {
3    if (!userLoggedIn) return ;
4    return ;
5  };
6}

4. Types of Components in React

• Functional Components (with hooks, preferred in modern React)
• Class Components (older syntax, still used)
• Pure Components (optimize unnecessary renders)
• Controlled & Uncontrolled Components (form handling)
• Higher-Order Components (HOCs)

5. React Lifecycle Methods

React manages components through phases:

Class Components:

• Mounting: constructor → render → componentDidMount
• Updating: shouldComponentUpdate → componentDidUpdate
• Unmounting: componentWillUnmount

Functional Components:

• useEffect(() => {}, []) → mount
• useEffect(() => return () => {}, []) → unmount

6. How many virtual DOMs does React maintain?

React maintains one virtual DOM per rendering cycle. It compares it with the previous version (diffing) and applies only the changes to the actual DOM for optimal performance.

7. What is Virtual DOM and Why?

The Virtual DOM is an in-memory representation of the real DOM. React uses it to detect changes efficiently and re-render only the required parts, improving performance drastically compared to direct DOM manipulation.

8. TypeScript vs JavaScript (If given a choice)

TypeScript is a superset of JavaScript with optional static typing.

Why TypeScript?

• Catches errors at compile time
• Improves code readability and refactoring
• Better IDE support (autocomplete, intellisense)
• Easier collaboration in large teams

Use JavaScript for quick prototypes or small scripts, but TypeScript is recommended for any scalable or production-level project.

9. How to Measure Website Performance

• Lighthouse (Google Chrome DevTools)
• Core Web Vitals (SEO-critical metrics)
• WebPageTest.org
• Chrome Performance Profiler
• Vercel Analytics (for Next.js apps)

Metrics to watch: FCP, LCP, TBT, CLS

10. What is a Boundary?

In React, a boundary typically refers to an Error Boundary — a special component that catches JavaScript errors in its child component tree and displays fallback UI.

Implemented using class components with componentDidCatch() and getDerivedStateFromError().

11. What is Debounce?

Debounce is a performance technique where a function is delayed until a pause in events.

Use case: Typing in a search box. Instead of calling an API on every keystroke, debounce waits until typing stops (e.g., 300ms delay).

Example:

JavaScriptCopy
const debouncedFunc = debounce(() => fetchData(), 300);

12. What is Mounting in React?

Mounting is the phase when a React component is inserted into the DOM. For functional components, it’s handled using useEffect(() => {}, []). It’s often used to fetch initial data or start timers.

13. What is Next.js?

Next.js is a React-based framework by Vercel that offers server-side rendering, static site generation, file-based routing, API routes, and built-in performance optimizations.

It’s a production-grade framework used by companies like Netflix, TikTok, and GitHub.

14. Is Next.js Server-side or Client-side by default?

Next.js is hybrid:

• Static Generation (default)
• Server-Side Rendering (via getServerSideProps)
• Client-side Rendering (via useEffect or dynamic imports)

You can choose the strategy per page.

15. Why Choose Next.js Over React?

React is a UI library. Next.js is a full-stack framework.

• Built-in SSR/SSG for SEO
• File-based routing without react-router
• API endpoints without separate backend
• Automatic image optimization
• Great developer experience (fast refresh, linting, routing, etc.)

16. Techniques to Improve Web Performance

• Lazy load images/components
• Use next/image for responsive, optimized images
• CDN and HTTP caching
• Code splitting
• Minify CSS and JS
• Prefetch routes using ``
• Avoid large dependencies
• Use debounce, throttle, and cleanup in useEffect

17. What is SSR (Server-Side Rendering)?

SSR renders HTML on the server before sending it to the client. Used for SEO, dynamic data, and better first paint.

In Next.js:

JavaScriptCopy
1export async function getServerSideProps(context) {
2  return { props: { data } };
3}

18. Semantic HTML (Skipped)

19–22. HTML-related Questions (Skipped)

23. Memory Leaks in React

Memory leaks happen when unused memory isn’t released.

Common causes:

• Not cleaning up subscriptions or listeners
• Long-living closures
• Unresolved async functions

Use useEffect(() => return () => {...}, []) to clean up timers, listeners, etc.

24. Boundary (Repeat of Q10)

Error Boundaries again. Use them to catch and gracefully handle unexpected crashes.

25. Debounce (Repeat of Q11)

Delays execution until the user stops firing events. Crucial for optimizing form inputs, API calls, or resize events.

26. TypeScript vs JavaScript (Repeat of Q8)

TypeScript helps scale projects and avoid runtime bugs.

✨ Conclusion

Preparing for frontend interviews requires more than knowing how React or Next.js works. It’s about understanding why certain tools exist, how they work under the hood, and when to apply them.

This article gives you a ready-to-revise, job-oriented breakdown of key frontend concepts—from lifecycle hooks to performance tips, and from memory leaks to SSR.

✅ Share this with your fellow developers. ✅ Post it on your portfolio or community blog. ✅ Bookmark it before your next interview.

Written with ❤️ by Rohit Kumar Yadav Follow my updates: Resources and Updates Channel