Web Development Frameworks 5 — Questions and Answers
Question 1: What is the purpose of Vue Router's `navigation guards`?
- Preventing SQL injection in route parameters
- Intercepting navigation events to redirect, cancel, or perform async operations before route changes complete (Correct answer)
- Guarding against XSS in URL query strings
- Throttling navigation to prevent rapid route changes
Correct answer: Intercepting navigation events to redirect, cancel, or perform async operations before route changes complete
Navigation guards like beforeEach allow you to run code before a route change completes, enabling auth checks, data pre-fetching, or conditional redirects.
Question 2: What is a Higher-Order Component (HOC) in React?
- A component that renders above others in the component tree hierarchy
- A function that takes a component and returns a new component with added behavior (Correct answer)
- A class component that extends multiple parent components
- A component with a priority render queue
Correct answer: A function that takes a component and returns a new component with added behavior
An HOC is a function that accepts a component and returns an enhanced version of it, enabling logic reuse across components without modifying their source.
Question 3: In Angular, what is the difference between `@Input()` and `@Output()`?
- @Input() sends data to the server; @Output() receives it back
- @Input() passes data from parent to child; @Output() emits events from child to parent (Correct answer)
- @Input() is for template variables; @Output() is for service injection
- @Input() binds CSS; @Output() binds JavaScript events
Correct answer: @Input() passes data from parent to child; @Output() emits events from child to parent
@Input() allows a parent to pass data down into a child component's property, while @Output() with EventEmitter lets a child emit events that the parent listens to.
Question 4: What is Svelte's primary compile-time advantage over React and Vue?
- Svelte compiles to WebAssembly for near-native performance
- Svelte compiles components to vanilla JavaScript with no runtime framework overhead (Correct answer)
- Svelte uses a smaller virtual DOM implementation
- Svelte pre-renders all pages to static HTML at compile time
Correct answer: Svelte compiles components to vanilla JavaScript with no runtime framework overhead
Svelte shifts work to compile time, generating minimal vanilla JS that directly manipulates the DOM without shipping a runtime framework, resulting in smaller bundles.
Question 5: What is the purpose of `useMemo` in React?
- Memoizes a function reference to prevent it from being recreated on each render
- Caches the result of an expensive computation and only recomputes when dependencies change (Correct answer)
- Stores component state across page refreshes
- Memoizes API responses to avoid duplicate network requests
Correct answer: Caches the result of an expensive computation and only recomputes when dependencies change
useMemo returns a memoized value, recomputing only when its dependency array changes, preventing expensive recalculations on every render.
Question 6: In Next.js App Router, what makes a component a Server Component by default?
- Adding 'use server' directive at the top of the file
- Placing it in the /server directory
- All components in the app/ directory are Server Components unless 'use client' is declared (Correct answer)
- Using async/await in the component function
Correct answer: All components in the app/ directory are Server Components unless 'use client' is declared
In Next.js App Router, every component is a React Server Component by default; only adding 'use client' at the top converts it to a Client Component.
Question 7: Which pattern does Redux follow for managing state changes?
- Observer pattern — components subscribe and mutate state directly
- Unidirectional data flow — actions → reducer → new state → UI update (Correct answer)
- Bidirectional binding — state and UI stay in sync automatically
- Event sourcing — state is rebuilt from a log on each read
Correct answer: Unidirectional data flow — actions → reducer → new state → UI update
Redux enforces unidirectional data flow: dispatched actions are processed by pure reducer functions that return new state objects, which trigger UI re-renders.
Web Development Frameworks 5
What is the purpose of Vue Router's `navigation guards`?