UI Frameworks

A function component is a plain function that takes a props object and returns React elements, using hooks for state and effects. A class extends React.Component and implements render() plus lifecycle methods. Only error boundaries still require a class.

Every render re-runs the component body, so the arrow expression evaluates again into a new function object. The allocation itself is cheap; the new identity only matters where something compares it, such as a memoized child or a dependency array.

The first passes the function so React can call it on click. The second calls it during render and passes its return value, usually undefined, so nothing happens on click and the side effect fires on every render.

React ignores a handler's return value entirely. Returning false only cancels defaults in inline HTML attributes and jQuery handlers. In React you call e.preventDefault(), and e.stopPropagation() separately if you also want to stop bubbling.

React passes a SyntheticEvent: a cross-browser wrapper that mirrors the DOM event interface (type, target, preventDefault, stopPropagation). The untouched browser event is always available on e.nativeEvent for anything React does not normalize.

Put animate.enter="toast-in" and animate.leave="toast-out" on the toast element inside @if. Angular adds the enter class when the element is inserted and removes it afterwards; on removal it adds the leave class and keeps the element until that animation ends.

trigger() names an animation bound in the template as [@name]; state() pairs a state value with the style() it rests in; transition() matches a change such as 'open <=> closed' and runs animate() steps. It needs provideAnimationsAsync() or an equivalent provider.

Angular's default ErrorHandler only logs the error with console.error. To replace it, write a class with a handleError(error) method and register { provide: ErrorHandler, useClass: MyHandler } in the application's providers.

provideAppInitializer registers a function Angular runs during bootstrap, before the root component is created; if it returns a Promise or Observable, startup waits for it. It replaced the APP_INITIALIZER multi-provider token, deprecated since v19.

declarations lists the non-standalone components, directives and pipes a module owns; imports brings in what its templates use; exports shares declarables with importers; providers registers services; bootstrap names the root component bootstrapModule renders.

Assign it to app.config.globalProperties.$formatCurrency before mounting. It replaces Vue 2's Vue.prototype: templates and Options API this can read it, but a component's own property of the same name wins and script setup code cannot use this.

app.mount() renders the root component into the container and returns the root component instance, not the app. That instance has no use() method, so chaining .use() after mount throws; configure and register everything first, then call mount last.

A Vue 3 plugin is an object with an install(app, options) method, or a bare function used as install. app.use calls it synchronously with the app and any extra arguments, installs it once per app, and returns the app.

Without KeepAlive, Vue unmounts the form's component when the tab switches away and builds a fresh one on return, losing every typed value. KeepAlive deactivates and caches the instance instead, so the same instance, state and DOM come back.

Vue's <Teleport> renders its slot content into another DOM node, typically body, so ancestor overflow, transforms and stacking contexts stop constraining the modal. Its to prop takes a CSS selector string or an actual DOM element.

A value an ancestor publishes to its whole subtree so any descendant can read it where it is used, instead of every component on the path accepting and forwarding an input it does not need.

A default content slot is a placeholder where a component renders whatever content its caller passed between its tags. The caller writes and owns that content; the component only chooses where, and whether, it appears.

A host-node reference is a container the framework fills with the real node it created for a rendered element, so code can focus, scroll or measure it. It is empty while output is described and filled once that output is committed.

Declared inputs are the named values a parent passes into a child to parameterize it. The parent owns each one and re-supplies it every render, so the child only reads: a write there never reaches the owner.

A definition is the reusable recipe: a function, a class or a compiled template. An instance is one live copy created where that definition is used, owning its own state. The output is the description the instance produces each update.