Quick definitions - rs-hash/Senior GitHub Wiki

Refers to a traditional software architecture where an entire application is developed as a single, tightly coupled unit. This includes both frontend and backend components tightly integrated into one codebase. Often associated with challenges such as scalability, maintenance complexity, and limited agility in introducing changes or updates.

An architectural pattern for frontend development where a large, monolithic frontend application is decomposed into smaller, more manageable frontend modules or micro frontends. Each microfrontend is responsible for a specific feature or functionality, can be developed, tested, and deployed independently, and can be composed together to form a unified user interface.

Refers to a version control repository that contains multiple projects, modules, or applications within a single repository. All related codebases, dependencies, configurations, and version history are centralized in the monorepo, promoting code sharing, collaboration, and versioning across projects.

Describes an architectural approach where a single platform or infrastructure hosts and manages multiple independent websites or web applications. Each site within the multisite architecture has its own configurations, content, users, and possibly different technologies or platforms, while sharing common resources and management tools.

Monolithic architectures are the opposite of microfrontend architectures. Monolithic applications are large, single-unit systems, while microfrontends decompose the frontend into smaller, independent modules. Microfrontends aim to address the limitations of monolithic architectures by promoting modularity, independence, and agility in frontend development.

Monorepos can be used to manage codebases for both monolithic and microfrontend architectures. They facilitate code sharing, versioning, and collaboration across projects within a single repository. Microsites and multisite architectures are related in the sense that multisite architectures can host multiple microsites, each operating independently but sharing common resources and management infrastructure.

• CORS stands for Cross-Origin Resource Sharing. It's a security feature implemented by web browsers to control which web applications running at one origin (domain, protocol, and port) have permission to access resources from another origin. An origin is defined as the combination of protocol, domain, and port, like https://example.com.

Same-Origin Policy:

• By default, web browsers enforce a Same-Origin Policy. This policy restricts web pages from making requests to a different origin (e.g., different domain, protocol, or port) for security reasons. This restriction prevents potential security vulnerabilities, such as cross-site scripting (XSS) attacks.

Cross-Origin Requests:

• CORS allows controlled access to resources from different origins. When a web page makes a cross-origin HTTP request (e.g., using JavaScript's fetch or XMLHttpRequest), the browser sends an HTTP request with an Origin header indicating the requesting origin.

Preflight Requests:

• For certain types of cross-origin requests (e.g., those with custom headers or methods like PUT or DELETE), the browser first sends a preflight request using the OPTIONS HTTP method to check if the server allows the actual request. This preflight request includes additional headers like Access-Control-Request-Method and Access-Control-Request-Headers.

Server-Side Configuration:

• The server receiving the cross-origin request can respond with appropriate CORS headers to indicate whether the request is allowed or denied. These headers include:
• Access-Control-Allow-Origin: Specifies which origins are allowed to access the resource. It can be set to a specific origin, "*", or a list of allowed origins.
• Access-Control-Allow-Methods: Specifies the HTTP methods (e.g., GET, POST, PUT) allowed for the resource.
• Access-Control-Allow-Headers: Specifies the HTTP headers allowed in the request.
• Access-Control-Allow-Credentials: Indicates if the request can include credentials (e.g., cookies, HTTP authentication).
• Access-Control-Expose-Headers: Specifies which headers can be exposed to the client.

Handling CORS Errors:

• If the browser detects a CORS violation (e.g., when the server doesn't include the necessary CORS headers), it blocks the request, and JavaScript code attempting to access the response data will receive a CORS error. This error can be handled in the frontend code to provide appropriate feedback to users or take corrective actions.

Network

• Prefer HTTP 2 for better performance - supports Multiplexing ( single TCP connection for multiple requests & response )
• compressing the headers using header compression when you're requesting data from the server
• modern compression - brotli, better than gzip
• server caching
• Image optimization
• Bundle splitting- lazy load
• compress everything
• apollo caching - caching built in graphQL

Rendering

• Mobile friendly
• smart caching in client
• utilize localstorage session storage, cookie storage
• success error & loading states
• Server side rendering
• Defer non critical resources
• focus on above the fold content - focus on whats on users screen
• calculate time to interactive - calculate first contentful paint, log when component rendered with data
• Preload JS when needed
• Import only what you need
• Tree shaking, eliminate dead code
• Virtualization
• CSS - avoid reflows -
• Debounce, throttle

Core Web Vitals are a set of specific factors that Google considers essential for user experience on the web. They are part of Google's broader initiative to improve web performance and user satisfaction. Core Web Vitals focus on three key aspects of web page experience: loading, interactivity, and visual stability

LCP - Largest contentful paint ( Loading performance) < 2.5s

• Reduce unused JS
• Reduce render blocking resources
• Reduce unused css
• minify css, JS

INP - Interaction to Next Paint ( Interactivity ) < 200ms

• Minimize dom size

CLS - Cumulative Layout Shift ( Visual stability ) < 0.1

• Images without dimensions.
• Ads, embeds, and iframes without dimensions.
• Dynamically injected content such as ads, embeds, and iframes without dimensions.
• Web fonts.

Tools

• chrome devtools
• lighthouse
• crux data in pagespeed insights

1. code management tools- NX

Next.js is a React framework that simplifies frontend development by offering features like server-side rendering (SSR), static site generation (SSG), automatic code splitting, and built-in routing. It's ideal for building SEO-friendly, performant web applications with a great developer experience.

Answer: Next.js supports SSR out of the box, where the server renders the React components into HTML on each request. This improves initial page load times, SEO, and performance by delivering fully rendered pages to the client.

Answer: SSG in Next.js pre-generates HTML pages at build time, enabling fast loading speeds and efficient content delivery. It's useful for static content or pages that don't require dynamic data fetching.

Here's how hydration works in Next.js:

Server-Side Rendering (SSR):

• During SSR, Next.js generates HTML content on the server and sends it to the client as part of the initial response.
• When the client receives the HTML, it also downloads the JavaScript bundle containing React components and client-side logic.
• Hydration occurs when the JavaScript bundle is loaded and executed on the client-side. React reconciles the server-rendered HTML with the client-side components, attaching event handlers and restoring component state.
• This process allows for a seamless transition from server-rendered content to client-side interactivity without a full page reload.

Static Site Generation (SSG):

With SSG, Next.js pre-generates HTML pages at build time based on the data available during the build process. When a user visits a page, the pre-rendered HTML is served immediately, providing fast initial loading times and SEO benefits. Similar to SSR, hydration occurs when the client-side JavaScript bundle is loaded and executed. React takes over the static HTML, hydrates components, and enables dynamic client-side behavior.

1. scalability

• MVC (Model-View-Controller):
• MVVM (Model-View-ViewModel):
• Singleton Pattern:
• Observer Pattern:
• Factory Pattern:
• Decorator Pattern:
• Facade Pattern:
• Module Pattern:
• Dependency Injection (DI) / Inversion of Control (IoC):

React:

• Component-Based Architecture: React's core concept is building UIs using reusable components, which aligns with the Component-Based Design pattern.
• Virtual DOM and Reconciliation:
• React uses a virtual DOM (Document Object Model) to update the UI.
• The virtual DOM is a lightweight in-memory representation of the real DOM, which allows React to make changes to the UI without manipulating the actual DOM. This makes updates faster, as changing the virtual DOM is less expensive than changing the real DOM.
• The reconciliation algorithm works by comparing the current virtual DOM tree to the updated virtual DOM tree, and making the minimum number of changes necessary to bring the virtual DOM in line with the updated state.

The algorithm uses two main techniques to optimize updates:

• 🚀 Tree diffing: React compares the current virtual DOM tree with the updated virtual DOM tree, and identifies the minimum number of changes necessary to bring the virtual DOM in line with the updated state.

• 🚀 Batching: React batches multiple changes into a single update, reducing the number of updates to the virtual DOM and, in turn, the real DOM.

• State Management: React provides flexibility in managing state using patterns like Flux, Redux, or Context API for managing application-wide state.

• Functional Programming: React encourages functional programming concepts, such as pure functions, immutability, and declarative programming style.

Angular:

• Model-View-Controller (MVC): Angular uses a variant of MVC called Model-View-ViewModel (MVVM) where components act as both controllers and views, with services handling the model/business logic.
• Dependency Injection (DI): Angular's DI system allows for loosely coupled components, promoting the Dependency Injection pattern for managing dependencies.
• Observables and Reactive Programming: Angular leverages RxJS Observables for handling asynchronous data streams, aligning with the Observer pattern and reactive programming principles.
• Decorator Pattern: Angular uses decorators (e.g., @Component, @Injectable) to enhance classes with metadata and behaviors, akin to the Decorator pattern.

Next.js:

• Component-Based Architecture: Next.js builds on React's component-based architecture for building UIs.
• Server-Side Rendering (SSR): Next.js implements SSR, aligning with the Server-Side Rendering pattern for improving initial page load times and SEO.
• Static Site Generation (SSG): Next.js supports SSG, following the Static Site Generation pattern for pre-rendering HTML pages at build time.
• Routing and Data Fetching: Next.js provides built-in routing and data fetching mechanisms, integrating with React Router for routing and offering APIs like getStaticProps and getServerSideProps for data fetching.

• Authentication is the process of verifying the identity of a user or entity accessing a system or application.

• It ensures that only authorized users can access protected resources, thereby enhancing security and privacy.

• Authentication verifies the identity of a user, ensuring they are who they claim to be. Authorization, on the other hand, determines the level of access or permissions granted to an authenticated user, defining what actions or resources they can access within the system.

• Common authentication methods include:

• Username/password authentication

• OAuth (Open Authorization)

• JWT (JSON Web Tokens)

• SAML (Security Assertion Markup Language)

• OpenID Connect

Authentication:

• Step 1: User Authentication Request: The user initiates an authentication request by providing credentials (e.g., username/password) or using alternative authentication methods (e.g., social login, single sign-on).
• Step 2: Authentication Validation: The system verifies the user's credentials or authentication tokens against stored user data (e.g., database, identity provider).
• Step 3: Successful Authentication: If the credentials are valid, the user is authenticated, and a session is established. The system generates an authentication token or session ID to identify the authenticated user.

Authorization:

• Step 4: Access Request: The authenticated user or client application requests access to specific resources or performs actions within the system (e.g., accessing APIs, viewing protected content).
• Step 5: Authorization Check: The system performs an authorization check to determine if the user or client has the necessary permissions to access the requested resources or perform the requested actions.
• Step 6: Authorization Response: If the user or client is authorized, the system grants access and allows the requested actions. If unauthorized, the system denies access and may return an authorization error or redirect to an appropriate page.

Token-Based Authentication and Authorization:

• In token-based systems (e.g., OAuth, JWT), authentication involves issuing a token (e.g., access token) to the authenticated user or client after successful login.
• Authorization is performed based on the permissions and scopes associated with the issued token. The token contains information about the user's identity, permissions, and expiration time.
• The client includes the token in subsequent requests to access protected resources. The system validates the token, checks permissions, and grants or denies access accordingly.

Session-Based Authentication and Authorization:

• In session-based systems, authentication involves creating a session for the authenticated user after successful login. The session is typically stored server-side and identified by a session ID.
• Authorization is based on the user's session data, including roles, permissions, and session attributes. Access to resources is granted or denied based on the user's session state and privileges.

A/B testing, also known as split testing, is a method used to compare two or more versions of a web page or application to determine which one performs better in terms of user engagement, conversions, or other key metrics. It involves dividing users into different groups and showing each group a different variation (A, B, etc.) to measure and compare their performance.

• Google Optimize: A free tool by Google that allows you to create and run A/B tests, multivariate tests, and personalization campaigns directly on your website.
• Optimizely: A comprehensive A/B testing and experimentation platform that offers visual editor tools, analytics, and targeting options for optimizing user experiences.
• VWO (Visual Website Optimizer): Provides A/B testing, split URL testing, multivariate testing, and heatmaps to analyze user behavior and optimize conversions.
• Adobe Target: A solution by Adobe that offers A/B testing, personalization, and AI-driven optimization capabilities for web and mobile experiences.
• Crazy Egg: Provides heatmaps, scrollmaps, and A/B testing tools to analyze user behavior and optimize website performance.
• Split.io: Focuses on feature experimentation, allowing teams to run A/B tests on specific features or functionalities in real-time.

LocalStorage

• Local Storage is apersistent storage mechanism that allows web applications to store key-value pairs locally in the user's browser.
• Data stored in Local Storage remains available even after the browser is closed and reopened.
• Use Cases: Local Storage is suitable for storing data that needs to persist across browser sessions, such as user preferences, settings, and non-sensitive application data.

SessionStorage Session Storage is similar to Local Storage but scoped to the current browser session. Data stored in Session Storage is accessible only within the same tab or window and is cleared when the session ends (e.g., when the tab is closed).

Cookies

• Cookies are small text files stored on the user's device by websites to track user activity, store session information, and personalize user experiences. Cookies have expiration dates and can be persistent (stored beyond the current session) or session-based (cleared when the browser is closed).

• When an HTTP-only attribute is set for a cookie, it restricts access to that cookie through JavaScript, making it inaccessible from client-side scripts running in the browser. In other words, HTTP-only cookies can only be accessed and manipulated by the server-side code, not by JavaScript running in the browser.

JWT stands for JSON Web Token, which is an open standard (RFC 7519) for securely transmitting information between parties as a JSON object. It's commonly used for authentication and authorization in web applications and APIs. JWTs are compact, URL-safe, and digitally signed, making them suitable for use in distributed systems and stateless authentication mechanisms.

• Stateless Authentication: JWT enables stateless authentication, where the server does not need to store session state. This is beneficial for scalable and distributed systems.
• Secure Information Exchange: JWTs can securely exchange information between parties because they are digitally signed using a secret key or public/private key pair.
• Token-Based Authorization: JWTs are commonly used for token-based authorization, allowing clients to access protected resources by presenting a valid token

Structure of JWT:

• Header: Contains metadata about the token such as the type of token (JWT) and the signing algorithm used (e.g., HMAC SHA256, RSA).
• Payload: Contains the claims, which are statements about the user or other data. Claims can include user ID, roles, permissions, expiration time, and custom data.
• Signature: Created by combining the encoded header, encoded payload, and a secret key or public/private key pair. The signature ensures the integrity of the token and verifies its authenticity.

How JWT Works:

• Authentication: When a user logs in or authenticates, the server generates a JWT and sends it to the client (usually in the response body or as a cookie).
• Authorization: The client includes the JWT in subsequent requests (typically in the Authorization header as a Bearer token) to access protected resources on the server.
• Verification: Upon receiving a JWT from the client, the server verifies the token's signature to ensure it hasn't been tampered with. It also checks the token's expiration time (if present) and other claims to authorize the request.
• Stateless Operation: Since JWTs are self-contained and contain all necessary information (claims), the server can process requests without needing to access a central session store or database.

Use Cases for JWT:

• Single Sign-On (SSO): JWTs are used in SSO systems to authenticate users across multiple applications without the need to re-enter credentials.
• API Authentication: JWTs are widely used for authenticating and authorizing API requests, enabling secure communication between clients and APIs.
• Mobile App Authentication: JWTs are suitable for authenticating users in mobile applications, providing a seamless and secure user experience.

GraphQL is a query language and runtime for APIs that enables clients to request only the data they need, making it a powerful alternative to traditional RESTful APIs. Avoids over-fetching & under-fetching

React Query is a library for managing and caching server state in React applications. It's designed to simplify data fetching, caching, and synchronization with server data in a declarative and efficient way.

A CMS (Content Management System) is a software application or platform that allows users to create, manage, and publish digital content on the web. It provides a user-friendly interface for non-technical users to create and update content without requiring knowledge of programming languages or web development.

XSS (Cross-Site Scripting) is a type of security vulnerability commonly found in web applications. It occurs when an attacker injects malicious scripts (typically JavaScript) into web pages viewed by other users. These scripts can then execute in the context of the victim's browser, potentially allowing the attacker to steal sensitive information, modify page content, or perform other malicious actions.

• Input Validation: Use libraries like DOMPurify to sanitize HTML and prevent script injection.
• Escape Output:Escape user-generated content when rendering it in HTML or JavaScript contexts. Use functions like innerHTML, textContent, or libraries/frameworks that automatically escape content (e.g., React's JSX).
• Content Security Policy (CSP):Implement a Content Security Policy (CSP) on your web server to control which scripts can be executed on your web pages.
• HTTPOnly Cookies: HTTPOnly cookies can only be accessed by the server, not by client-side scripts, reducing the risk of cookie-based XSS attacks.
• Avoid eval() and new Function():
• Use Strict Mode:Enable strict mode ('use strict';) in your JavaScript code to catch common programming mistakes and enforce a stricter set of rules for variable declarations and function behavior.

Tools

• SonarQube
• Fortify
• npm audit
• JAF
• Black duck

• a custom element attaches shadow DOM to itself, encapsulating its DOM/CSS:
• Shadow DOM is local to the component and defines its internal structure, scoped CSS, and encapsulates your implementation details.
• Shadow DOM composes different DOM trees together using the element. Slots are placeholders inside your component that users can fill with their own markup Hands down the most useful feature of shadow DOM is scoped CSS:
• CSS selectors from the outer page don't apply inside your component.
• Styles defined inside don't bleed out. They're scoped to the host element.
• Web components can style themselves too, by using the :host selector.

• Shadow DOM enables you to attach a DOM tree to an element, and have the internals of this tree hidden from JavaScript and CSS running in the page. There are some bits of shadow DOM terminology to be aware of:

• Shadow host: The regular DOM node that the shadow DOM is attached to.

• Shadow tree: The DOM tree inside the shadow DOM.

• Shadow boundary: the place where the shadow DOM ends, and the regular DOM begins.

• Shadow root: The root node of the shadow tree.

• Babel is a popular JavaScript compiler that allows developers to write code using the latest ECMAScript (ES) syntax and features while ensuring compatibility with older browsers and environments. It is primarily used for transpiling modern JavaScript code into a backward-compatible version that can run on a wide range of browsers and platforms.

• install Babel and its necessary packages as development dependencies in your React project. You typically need @babel/core, @babel/preset-env, @babel/preset-react, and any other plugins or presets you plan to use.

• Create a Babel configuration file named .babelrc in the root directory of your project. This file specifies the presets, plugins, and other settings for Babel

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

• For Webpack, you'll need to add babel-loader to your Webpack configuration to process JavaScript files through Babel. Install babel-loader as a development dependency

• Linting in a React project involves using a linting tool to analyze your code for potential errors, stylistic issues, and adherence to coding standards
• npm install --save-dev eslint
• npx eslint --init Run the following command in your project directory to create the initial .eslintrc file
• Make sure to add any installed plugins or presets to your .eslintrc configuration file under the plugins and extends sections.
• npx eslint .
• Replace . with the path to the files or directories you want to lint. ESLint will output any linting errors, warnings, or suggestions based on your configuration.

• webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.

• Entry - An entry point indicates which module webpack should use to begin building out its internal dependency graph

• Output - The output property tells webpack where to emit the bundles it creates and how to name these files

• Loaders - webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.

• Plugins - While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

• Mode - By setting the mode parameter to either development, production or none, you can enable webpack's built-in optimizations that correspond to each environme

Types of modules uses

• An ES2015 import statement
• A CommonJS require() statement
• An AMD define and require statement
• An @import statement inside of a css/sass/less file.

• Multiple separate builds should form a single application. These separate builds act like containers and can expose and consume code between builds, creating a single, unified application.

• This is often known as Micro-Frontends, but is not limited to that.

Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways:

Vite pre-bundles dependencies using esbuild. esbuild is written in Go and pre-bundles dependencies 10-100x faster than JavaScript-based bundlers

Immutable.js is commonly used in Redux and other state management libraries to handle immutable state updates, promotes functional programming, create new copies instead of modifying existing data. To make state updates pure.

• Redux is a state management library
• Redux Toolkit provides utilities for simplifying Redux setup
• Thunk is a middleware for async logic in Redux actions
• Saga is another middleware for managing complex async flows and side effects in a declarative way

Redux

Core Concepts:

• Store: Contains the application's state in a single immutable object.
• Actions: Plain JavaScript objects that represent changes to the state (e.g., { type: 'INCREMENT', payload: 1 }).
• Reducers: Functions that specify how state changes in response to actions. Reducers are pure functions that take the current state and an action, and return a new state.
• Dispatch: The method used to dispatch actions to the Redux store, triggering state updates.
• Selector: Functions that extract specific pieces of state from the Redux store.

Usage:

• Centralized State Management: Redux helps manage complex application states, especially in large-scale applications with shared state across multiple components.
• Time Travel Debugging: Redux's immutable state updates and action logging enable powerful debugging capabilities, such as time travel debugging with Redux DevTools.
• Middleware Support: Redux supports middleware like Redux Thunk and Redux Saga for handling asynchronous logic and side effects.

Redux Tolkit - Redux Toolkit is an official package recommended by the Redux team to simplify Redux setup, reduce boilerplate code, and promote best practices.

Features:

• configureStore: A function to set up a Redux store with sensible defaults and built-in middleware (e.g., Redux DevTools, Redux Thunk).
• createSlice: A function for creating Redux slice reducers with less boilerplate. It generates action creators and reducer functions automatically.
• createAsyncThunk: A utility for creating Redux Thunk async action creators with simplified error handling and loading states.
• createEntityAdapter: Helps manage normalized state for entities (e.g., users, posts) by providing pre-built reducer logic and selectors.

• "interceptors" is commonly used in the context of intercepting HTTP requests or responses in React applications when using libraries like Axios or fetch for API calls.
• Interceptors are useful for adding global logic to HTTP requests and responses in React applications, such as authentication, error handling, logging, and data transformation. They provide a way to centralize and manage common tasks related to API communication.

WCAG stands for Web Content Accessibility Guidelines. These are a set of guidelines and standards developed by the World Wide Web Consortium (W3C) to ensure that web content is accessible to people with disabilities. WCAG covers a wide range of accessibility principles and techniques, including those related to visual, auditory, motor, cognitive, and neurological disabilities.

Tools

Voiceover, JAWS, Lighthouse, axe devtools

• Semantic HTML: Use semantic HTML elements (, , , , etc.) to provide meaning and structure to your content.
• Keyboard Navigation: Ensure that all interactive elements are accessible and usable via keyboard navigation without relying on mouse interactions.
• Focus Management: Manage focus states appropriately, especially for modal dialogs, dropdowns, and other interactive components.
• Alt Text for Images: Include descriptive and meaningful alternative text (alt attribute) for images to provide context for users who cannot see them.
• Color Contrast: Ensure sufficient color contrast between text and background colors to improve readability for users with low vision.
• Accessible Forms: Use accessible form controls, labels, and error messages to assist users in filling out forms correctly.
• Aria Roles and Attributes: Use ARIA roles and attributes to enhance the accessibility of complex widgets, custom controls, and dynamic content.
• Readable Text: Use readable font sizes, styles, and line spacing to improve readability, especially for users with visual impairments.
• Video Captions and Audio Descriptions: Provide captions for videos and audio descriptions for multimedia content to support users with hearing impairments.
• Testing and User Feedback: Conduct usability testing with users of varying abilities and gather feedback to identify accessibility issues and improve user experience.

Node.js is a server-side JavaScript runtime environment that allows you to run JavaScript code outside of a web browser. It uses the V8 JavaScript engine, which is the same engine that powers Google Chrome, to execute JavaScript code on the server side.

useState: - Managing component state in functional components.

useState allows us to add state to functional components without using class components. It returns a state variable and a function to update that variable, providing a way to manage component state in a more concise and readable manner.

useEffect: Handling side effects in functional components.

Explanation: useEffect is used for performing side effects in functional components, such as data fetching, subscriptions, or DOM manipulations. It replaces lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount in class components

useContext: Accessing context values in functional components.

Explanation: useContext allows functional components to consume values from React context without nesting multiple levels of components with Consumer components. It simplifies the process of accessing global data or theme settings across the component tree.

useReducer: Managing complex state logic with actions and reducers.

Explanation: useReducer is an alternative to useState for managing state in complex scenarios where state transitions are based on actions. It is similar to Redux's reducer pattern and can handle more complex state logic in a more organized way.

useMemo: Memoizing expensive calculations or values in functional components.

Explanation: useMemo is used to memoize expensive computations or values so that they are only recalculated when dependencies change. It helps optimize performance by avoiding unnecessary re-renders in components.

useCallback: Memoizing callback functions to prevent unnecessary re-creations.

Explanation: useCallback is used to memoize callback functions so that they are only recreated when their dependencies change. It helps optimize performance in scenarios where callback functions are passed down to child components and can prevent unnecessary re-renders.

useRef: Accessing and persisting mutable values across renders without causing re-renders.

Explanation: useRef is used to create mutable references that persist across renders. It is commonly used to access DOM elements, store previous values, or manage mutable variables without triggering re-renders.

Functional components are leaner and more flexible. It's easier to work with state because we have React hooks that help handle state and side effects.

• npm: npm installs packages sequentially, which can lead to slower installation times for large projects with many dependencies.
• Yarn: Yarn uses parallel and caching mechanisms for dependency resolution, which can result in faster and more efficient package installations.

Spread, Rest, Destructure, Default:

• setTimeout: The setTimeout function is used to execute a function or code snippet after a specified delay (in milliseconds).
• setInterval: The setInterval function is used to repeatedly execute a function or code snippet at specified intervals (in milliseconds).

Definition: Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their containing scope during the compilation phase.

• var: Declares a variable with function scope or global scope.
• let: Declares a block-scoped variable that can be reassigned.
• const: Declares a block-scoped variable that cannot be reassigned (immutable).

Definition: Closure is a JavaScript feature where a function retains access to its parent scope, even after the parent function has finished executing.

Prototype-based inheritance is a way of creating objects in JavaScript where objects inherit properties and methods from a prototype object.

TypeScript is a strongly typed superset of JavaScript that compiles to plain JavaScript. TypeScript allows you to define types for variables, function parameters, return types, and more. This static typing helps catch type-related errors during development, leading to more robust and predictable code.