Frameworks Flashcards

What is the purpose of Vue Router's `navigation guards`?

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.

What is a Higher-Order Component (HOC) in React?

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.

In Angular, what is the difference between `@Input()` and `@Output()`?

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.

What is Svelte's primary compile-time advantage over React and Vue?

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.

What is the purpose of `useMemo` in React?

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.

In Next.js App Router, what makes a component a Server Component by default?

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.

Which pattern does Redux follow for managing state changes?

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.