1. Describe the difference between the opacity and visibility properties in CSS.

How do they affect the rendering and interaction of elements?

Ans: The opacity property changes an element's transparency but keeps it

interactive, while the visibility property toggles an element's visibility without
affecting interactivity.

2. How would you approach using CSS animations to instill a 'sense of wonder' for
users interacting with a web page?

Ans: use smooth transitions, dynamic transformations, and playful elements

that react to user interactions

3. Discuss the differences between use Effect and useLayoutEffect. When should
you use one over the other?

Ans: useEffect runs after the DOM updates, useful for side effects like data
fetching, while useLayoutEffect runs before the DOM is painted, ideal for
measuring or modifying the DOM immediately.

4. Discuss the use and importance of the 'will change' property in CSS.

Ans: optimizes performance by informing the browser about upcoming

changes to elements, enhancing animation smoothness.

5. Explain the difference between call, apply, and bind functions in JavaScript.

Ans: call invokes a function with a specified this context and arguments, apply
does the same but takes arguments as an array, and bind creates a new
function with a specified this context and preset arguments.

6. Demonstrate your understanding of GraphQL and experience with APIs.

Ans: GraphQL optimizes API queries by allowing clients to request specific

data, enhancing performance. I'm experienced in designing schemas, querying
data efficiently, and integrating GraphQL with REST APIs.

7. What are WebSockets? What are the steps involved in creating a WebSocket
connection on the frontend?
 Ans: WebSockets enable bidirectional communication between a client and a
server over a single, persistent connection, established by instantiating a
WebSocket object in the browser, defining event listeners, and managing
messages.

8. Explain the difference between debouncing and throttling functions with

examples.

ANS: Debouncing delays invoking a function until after a certain time has
elapsed since the last invocation, while throttling limits the frequency of
invoking a function to a specified interval.

9. Describe how React's reconciliation algorithm works.

ANS: compares the virtual DOM with the previous version, identifies changes,
and updates only the necessary parts of the actual DOM for efficient
rendering.

10. Compare and contrast React's useState and useReducer hooks.

ANS: useState manages state with simple updates, while useReducer is more
suitable for complex state logic with actions and reducers.

11. What are your favourite websites or applications that have best-in-class user
experience? What design techniques make them stand out according to you?

ANS: Google: Clean design, efficient search.

Netflix: Personalized recommendations, seamless navigation.

12. Discuss the libraries and techniques you would use for data visualization in
React for interactive charts with examples

Ans:- Recharts and D3.js are commonly used, enabling interactive charts
through declarative components and powerful data manipulation techniques

13. Discuss the implications of hoisting in JavaScript. How does hoisting affect
variable declarations and function declarations?
 Ans:- moves variable and function declarations to the top of their scope,
causing var variables to be undefined initially, while functions are fully hoisted
and can be called before their declaration.

14. Explain how CSS custom properties (variables) work. How do they differ from
preprocessor variables in SASS or LESS?

Ans :- dynamic and can be changed at runtime, unlike SASS/LESS variables

which are static and compiled at build time.

15. Explain memoization in React and the usage of useMemo()?

Ans :- Memoization in React, achieved using useMemo, caches expensive

computations, recalculating only when dependencies change, thus optimizing
performance.