A:
var: Function-scoped, hoisted, can be redeclared.let: Block-scoped, not hoisted, cannot be redeclared but can be reassigned.const: Block-scoped, not hoisted, cannot be redeclared or reassigned.
A:
A closure is a function that retains access to its lexical scope even when the outer function has finished executing.
A:
Attaching a single event listener to a parent element to manage events from its child elements via event bubbling.
A:
JavaScript objects inherit properties and methods from a prototype object, allowing shared functionality without classes.
A:
==: Loose equality with type coercion.===: Strict equality without type coercion.
A:
It's a mechanism that handles asynchronous callbacks by processing the call stack and task queue to enable non-blocking I/O.
A:
Promises represent the result of async operations; async/await provides cleaner syntax to write asynchronous code using promises.
A:
Arrow functions have a shorter syntax and do not have their own this, arguments, or prototype.
A:
"this" references the object that is executing the current function, with its value determined by how the function is called.
A:
call: Invokes a function with a specified this and individual arguments.apply: Invokes a function with a specified this and arguments as an array.bind: Returns a new function with a bound this and optional preset arguments.
A:
JavaScript automatically allocates memory when objects are created and frees it when they're no longer referenced. Garbage collection identifies and removes unreachable objects.
A:
Background threads for executing scripts separate from the main thread, enabling concurrent processing without blocking the UI.
A:
- Synchronous: Code executes sequentially, blocking until current operation completes.
- Asynchronous: Operations continue executing without waiting for long-running tasks to complete.
A:
JSX is a syntax extension for JavaScript that looks like HTML and transpiles to React.createElement() calls.
A:
An in-memory representation of the real DOM that React uses to batch and optimize updates.
A:
useState: Hook to manage component state.useEffect: Hook to perform side effects like data fetching or subscriptions.
A:
A way to pass data through the component tree without prop drilling.
A:
- Controlled: Form inputs controlled by React state.
- Uncontrolled: Inputs managed by the DOM, accessed via refs.
A:
React's process to compare virtual DOM trees and efficiently update the real DOM.
A:
useMemo: Memoizes values to avoid expensive recalculations.useCallback: Memoizes functions to avoid unnecessary re-creations.
A:
For managing complex state logic or multiple related state variables within a component.
A:
A feature to handle asynchronous loading with fallback UIs, often used with lazy loading components or data fetching.
A:
A new paradigm allowing components to render on the server, reducing client-side JavaScript and improving performance.
A:
Similar to useEffect but fires synchronously after DOM mutations and before browser paint, useful for DOM measurements.
A:
A development-only mode that identifies potential problems by intentionally double-invoking functions and highlighting deprecated APIs.
A:
Error boundaries are components that catch JavaScript errors in their child component tree, log those errors, and display a fallback UI.
A:
- State: Private internal data managed by the component itself.
- Props: External data passed to a component from its parent.
A:
Pages inside the pages/ directory automatically become routes.
A:
getStaticProps: Fetches data at build time (static generation).getServerSideProps: Fetches data on each request (server-side rendering).getInitialProps: Legacy method for fetching data.
A:
Allows static pages to be updated after build with a revalidation interval.
A:
Routes created with brackets, e.g., [id].js, for dynamic URL parameters.
A:
Code that runs before a request is completed, useful for auth, redirects, headers.
A:
next/image automatically provides lazy loading, resizing, and WebP format support.
A:
Backend endpoints defined in pages/api/ folder to handle requests.
A:
A new routing system introduced in Next.js 13 that uses a file-system based router built on React Server Components.
A:
Server-side functions that handle HTTP requests in the app directory, replacing API routes from the pages directory.
A:
App directory supports React Server Components, shared layouts, intercepting routes, and nested routes, while pages directory uses the older pages router.
A:
Automatically splits code by pages, dynamically loads components, and supports dynamic imports for optimal performance.
A:
JSON Web Tokens are compact, URL-safe tokens used to represent claims for authentication and authorization, often stored client-side.
A:
- Authentication: Verifying who the user is.
- Authorization: Determining what the user is allowed to do.
A:
Use authentication state/context on frontend to guard routes, and verify tokens (JWT/session) on backend APIs.
A:
Store JWTs in HttpOnly cookies to prevent XSS attacks, implement proper expiration times, and use HTTPS.
A:
An open standard authorization framework that enables third-party applications to access resources without exposing credentials.
A:
Cross-Site Request Forgery tricks users into performing unwanted actions; prevent using CSRF tokens, SameSite cookies, and custom headers.
A:
Using fetch, axios, or data-fetching libraries inside useEffect or custom hooks.
A:
Updating the UI immediately assuming API success, then reverting if the call fails.
A:
Show loaders, handle errors gracefully, provide retry options, and show success confirmations.
A:
Representational State Transfer is an architectural style with stateless client-server communication, uniform interface, cacheable resources, and a layered system.
A:
A query language for APIs that allows clients to request exactly what they need, reducing over-fetching and under-fetching common in REST.
A:
Implement request throttling, queuing, batch requests, and proper error handling with exponential backoff for retry logic.
A:
Libraries for data fetching that provide caching, automatic revalidation, pagination, and optimistic updates with minimal boilerplate.
(Expect discussion on portal usage, accessibility, backdrop, and animation.)
(Discuss modular components, code splitting, SSR, caching, auth, and error handling.)
(Use hooks like useState, useMemo, and lifecycle methods.)
A:
Use memoization (React.memo, useMemo, useCallback), code splitting, lazy loading, image optimization, and reduce unnecessary renders.
A:
Consider centralized stores (Redux, Zustand), context API, server state libraries, and potentially a hybrid approach based on data types.
A:
Follow ARIA patterns, implement keyboard navigation, provide screen reader announcements, and manage focus correctly.
A:
Use HTML5 Drag & Drop API or libraries like react-dnd, handle keyboard alternatives, and provide accessible feedback.
A:
- Single Responsibility
- Open/Closed
- Liskov Substitution
- Interface Segregation
- Dependency Inversion
A:
- DRY: Don't Repeat Yourself
- KISS: Keep It Simple, Stupid
- YAGNI: You Aren't Gonna Need It
A:
Dividing application into distinct sections (presentation, business logic, data access) to improve maintainability and scalability.
A:
Functions that always return the same output given the same input and have no side effects, making code more predictable and testable.
A:
Ensures a class has only one instance.
A:
A function that takes a component and returns a new enhanced component.
A:
A method for creating objects without exposing instantiation logic to the client.
A:
Subscribers listen and react to events or state changes from a subject.
A:
A technique for sharing code between components using a prop whose value is a function.
A:
Separating data fetching and state management (containers) from rendering UI (presentational components).
A:
Components that work together to form a cohesive API, giving flexibility in composition while maintaining shared state.
A:
merge: Combines branches creating a merge commit.rebase: Rewrites commit history to create a linear history.
A:
Git Flow, Trunk-based development, Feature branching.
A:
A PR is a request to merge code; code review ensures code quality and standards.
A:
CI/CD pipelines to automate testing, building, and deploying projects.
A:
- Continuous Integration: Automated testing on every code change.
- Continuous Delivery/Deployment: Automated deployment after passing tests.
A:
Use present tense and follow conventional commit types: feat:, fix:, chore:, etc.
A:
A binary search tool to find which commit introduced a bug by marking commits as "good" or "bad".
A:
Manually edit conflict markers in affected files, choose which changes to keep, then commit the resolved version.
A:
Unit tests, integration tests, component tests, end-to-end tests, and visual regression tests.
A:
A development process where tests are written before implementing features, following the red-green-refactor cycle.
A:
Using libraries like Jest and React Testing Library to test rendering, user interactions, and component behavior.
A:
Creating substitutes for dependencies to isolate code, control test conditions, and simulate specific scenarios.
A:
Using async/await with test frameworks, waiting for promises to resolve, and mocking timers for predictable testing.
A:
Tailwind is a utility-first CSS framework providing low-level utility classes instead of pre-designed components like Bootstrap.
A:
- Highly customizable
- Reduces CSS bloat
- Speeds up styling with utilities
- Easy to create responsive designs
A:
By editing the tailwind.config.js file to extend or override default theme values.
A:
ShadCN UI is a collection of reusable components built on Radix UI primitives, styled with Tailwind CSS, and designed to be copied into projects rather than installed as a dependency.
A:
They provide accessibility, keyboard navigation, and proper ARIA attributes while allowing complete styling freedom.
A:
Using the built-in dark mode variant with either class or media strategy, enabling conditional styling based on theme.
A:
Fluid grids, flexible images, and media queries to create layouts that adapt to different screen sizes and devices.
A:
Starting design and development for mobile devices first, then progressively enhancing for larger screens.
A:
Web Content Accessibility Guidelines defining how to make web content more accessible to people with disabilities.
A:
Ensure all interactive elements are focusable, provide visible focus indicators, and implement proper tab order.
A:
Accessible Rich Internet Applications roles help define element purposes for assistive technologies, used when HTML semantics aren't sufficient.
A:
Use automated tools like Lighthouse, manual testing with screen readers, keyboard navigation testing, and following WCAG checklists.
A:
Google's metrics for user experience: LCP (loading), FID (interactivity), and CLS (visual stability), which impact SEO and user experience.
A:
Code splitting, lazy loading, image optimization, caching, minification, and reducing render-blocking resources.
A:
A bundler optimization that removes unused code from the final bundle, reducing file size.
A:
Using Chrome DevTools performance panel, Lighthouse audits, React Profiler, and monitoring real user metrics.
A:
- Client-side: Browser renders HTML using JavaScript after page load.
- Server-side: Server sends fully rendered HTML to browser, improving initial load time and SEO.
A:
Breaking code into smaller chunks loaded on demand, improving initial load time by only loading what's needed.
A:
Web applications that use modern web capabilities to provide app-like experiences with offline functionality, push notifications, and installability.
A:
A binary instruction format for executing high-performance code in web browsers, useful for CPU-intensive tasks like games, video editing, and encryption.
A:
An architectural approach where a frontend is decomposed into semi-independent applications maintained by different teams.
A:
Custom, reusable, encapsulated HTML elements built using standard web platform APIs: Custom Elements, Shadow DOM, and HTML Templates.
A:
Context API with useReducer, Zustand, Jotai, Recoil, and XState for simpler, more flexible state management solutions.