Web Development Frameworks 4 — Questions and Answers
Question 1: What is the role of `forwardRef` in React?
- Forwards Redux state to child components
- Allows a parent component to access a child component's DOM node or instance via a ref (Correct answer)
- Optimizes re-renders by forwarding previous render results
- Shares context values across component trees
Correct answer: Allows a parent component to access a child component's DOM node or instance via a ref
forwardRef lets a component pass a ref it receives down to a DOM element or another component, enabling parent components to interact with child DOM nodes.
Question 2: In Vue 3, what is the key difference between `ref()` and `reactive()`?
- ref() works only with primitives; reactive() works only with objects
- ref() wraps any value and accesses it via .value; reactive() makes a plain object deeply reactive (Correct answer)
- ref() is for template bindings only; reactive() is for script logic
- reactive() causes re-renders; ref() does not
Correct answer: ref() wraps any value and accesses it via .value; reactive() makes a plain object deeply reactive
ref() wraps any value type and requires .value access in JavaScript, while reactive() takes a plain object and makes all its properties reactive without .value.
Question 3: What is Angular's change detection strategy `OnPush` used for?
- Forces Angular to check the component on every browser event
- Limits change detection to run only when input references change or events fire within the component (Correct answer)
- Pushes component state changes to a global Redux store
- Triggers change detection only on HTTP responses
Correct answer: Limits change detection to run only when input references change or events fire within the component
OnPush tells Angular to skip change detection for a component subtree unless an input reference changes, an event originates within it, or it's manually marked for check.
Question 4: Which Express.js method correctly handles errors passed via `next(err)`?
- An error-handling middleware with signature (req, res, next)
- A standard middleware with try/catch
- An error-handling middleware with signature (err, req, res, next) (Correct answer)
- A router-level middleware with app.error()
Correct answer: An error-handling middleware with signature (err, req, res, next)
Express identifies error-handling middleware by its four-parameter signature (err, req, res, next); the extra `err` parameter distinguishes it from regular middleware.
Question 5: What is hydration in the context of server-side rendered React applications?
- Loading external data from APIs into React state
- The process of attaching React event listeners to server-rendered HTML already in the DOM (Correct answer)
- Caching component renders in Redis for faster subsequent loads
- Converting JSX to HTML on the client
Correct answer: The process of attaching React event listeners to server-rendered HTML already in the DOM
Hydration is when React takes over static HTML rendered by the server, attaches event listeners, and makes the page fully interactive without re-rendering the DOM.
Question 6: In Django REST Framework, what is a Serializer used for?
- Encrypting data before storing it in the database
- Converting complex data types like querysets to native Python datatypes and validating input (Correct answer)
- Generating URL patterns for API endpoints automatically
- Caching API responses in memory
Correct answer: Converting complex data types like querysets to native Python datatypes and validating input
DRF Serializers handle converting Django model instances or querysets to JSON-compatible data and validating incoming request data against defined fields.
Question 7: What does the `key` prop do when rendering lists in React?
- Encrypts list item data for security
- Helps React identify which items changed, added, or removed for efficient DOM updates (Correct answer)
- Sets the CSS class of each list item
- Specifies the sort order of list elements
Correct answer: Helps React identify which items changed, added, or removed for efficient DOM updates
Keys give React a stable identity for each list element, allowing it to reconcile the virtual DOM efficiently and avoid unnecessary re-renders or DOM mutations.
Web Development Frameworks 4
What is the role of `forwardRef` in React?