Frontend Interview Questions I Was Asked
Core Web Concepts
- What is the purpose of the
<head> tag in HTML, and how do the async and defer attributes affect the loading and execution of external scripts?
- Explain the differences between
var, let, and const in JavaScript. When would you use each?
- What is hoisting in JavaScript? How do
call, apply, and bind work, and when would you use them?
- Can you explain the JavaScript event loop? How does it handle asynchronous operations?
- Solve and explain the output for tricky JavaScript questions involving closures, promises, and event loops.
React & State Management
- How does the
useState hook work in React? How can you access the previous state when updating state?
- How are events processed in batches in React, and what are the benefits?
- What are React Hooks? Name a few and explain their use cases.
- How does the
useEffect hook work, and how can you use its cleanup function to prevent memory leaks?
- Explain the React diffing algorithm, Fiber architecture, and how React detects changes in the DOM.
Performance & Optimization
- What are some common optimization techniques in React applications?
- Given a piece of code, how would you optimize its performance?
- How does
React.memo help prevent unnecessary re-renders?
- How can passing children as props help avoid re-renders in React?
- How does composing components help avoid re-renders in React?
- Explain the use cases for
useMemo, useCallback, useReducer, useDeferredValue, and useRef in React.
Modern JavaScript & Syntax
- How do you use export and import syntax in ES6 modules?
- What are the key differences between ES5 and ES6 syntax? What new features were introduced in ES6?
State Management Libraries
- What is Redux, and how does it help manage state in React applications?
- Why is immutability important in Redux, and how does Redux enforce it?
- How does the React Context API work, and when should you use it?
Advanced Patterns & APIs
- What are compound components in React, and how do they help in building flexible UIs?
- How do you create custom hooks in React, and what are some best practices?
- Compare cookies, localStorage, and IndexedDB for client-side storage. When would you use each?
- How do JavaScript promises work? What is an immediately resolved promise, and how do you use promise utility methods like
all, any, and allSettled?
- In TypeScript, what are union and intersection types? Provide examples of when to use each.
Miscellaneous
- How can you synchronize tabs using browser events?
- How does the
useReducer hook work in React, and when should you use it?