Aria Web Documentation

styled-components is a library for React that allows you to define styled components using JavaScript. It utilizes Tagged Template Literals to embed CSS directly into JS, ensuring styles are scoped to specific components to prevent global CSS pollution. Key features include:

• Component-based Styling: Styles are encapsulated and do not affect other components.
• Dynamic Styling: Styles can be adjusted based on component props or state.
• Standard CSS Syntax: Uses familiar CSS properties and supports pseudo-classes (e.g., :hover).
• Automatic Optimization: Generates unique class names to avoid naming conflicts and automatically handles browser vendor prefixes.
• SSR Support: Compatible with server-side rendering frameworks like Next.js.

HTTP methods define the desired action to be performed on a resource. Common methods include:

• GET: Retrieve resources from the server (e.g., fetching a list or a single record).
• POST: Send data to the server to create a new resource.
• PUT: Update an existing resource by replacing its entire content.
• PATCH: Partially update a resource by modifying specific fields.
• DELETE: Remove a resource from the server.
• OPTIONS: Query supported HTTP methods for a server, typically used for CORS preflight requests.
• HEAD: Similar to GET but returns only the headers without the response body, used to check resource existence or metadata.

React uses a process called Reconciliation to efficiently update the UI by comparing the new virtual DOM with the old one to find the minimum set of changes. This process is split into two main phases:

1. Render Phase: React generates a new virtual DOM and performs 'diffing' to identify changes. This phase does not directly affect the real DOM.
2. Commit Phase: React applies the calculated changes to the real DOM and executes side effects.

CSS units are categorized based on their behavior and intended use cases:

• Absolute Units (px, cm, mm, in, pt, pc, Q): Best for fixed dimensions or print layouts.
• Relative Units (%, vw, vh, vmin, vmax, rem, em, ch, ex): Best for responsive design.
• Time Units (s, ms): Used for animations and transitions.
• Other Specialized Units (fr, deg, rad, turn): Used for CSS Grid layouts or rotations.
• General Keywords (inherit, initial, unset, revert, auto): Used to control how style properties behave.

The browser rendering engine converts HTML, CSS, and JavaScript into a visual page through a specific sequence of steps:

1. DOM Construction: Parsing HTML to build the Document Object Model (DOM) tree.
2. CSSOM Construction: Parsing CSS to build the CSS Object Model (CSSOM) tree.
3. Render Tree Construction: Combining DOM and CSSOM into a Render Tree.
4. Layout (Reflow): Calculating the exact position and size of each node.
5. Painting: Filling in pixels on the screen.
6. Compositing: Layering and flattening the painted elements into the final screen image.

IndexedDB is a built-in NoSQL database in the browser designed for storing large amounts of structured data on the client side. Unlike localStorage or sessionStorage, it offers several advantages:

1. Large Capacity: Can store MB to GB of data (depending on the browser), far exceeding the ~5MB limit of localStorage.
2. Structured Storage: Supports storing Objects; data is not limited to strings.
3. Indexing: Allows the creation of indexes for fast data retrieval.
4. Asynchronous API: Operations are non-blocking to the UI.
5. Transaction Mechanism: Ensures atomicity of operations.

It is best suited for Progressive Web Apps (PWAs), caching API responses, and projects requiring significant local data storage.

JavaScript uses a 'Mark-and-Sweep' algorithm to automatically reclaim memory by identifying and removing objects that are no longer reachable. In the context of React applications, memory leaks typically occur when references to objects are maintained unnecessarily. To prevent these leaks and assist the garbage collector, developers should:

1. Use the cleanup function in useEffect to clear timers and remove event listeners.
2. Limit the amount of data stored in state or memory.
3. Avoid the use of global variables that can prevent objects from being garbage collected.

JavaScript automatically manages memory using an engine (like V8). Memory is divided into two main areas:

• Stack Memory: Stores primitive types (numbers, booleans) and function call contexts.
• Heap Memory: Stores dynamically allocated data such as objects, arrays, and functions.

Garbage collection identifies 'garbage' (objects no longer in use) to free up memory. The primary algorithm used is Mark-and-Sweep:

1. Mark Phase: The engine starts from 'root objects' (e.g., window in browsers, global in Node.js, or local variables in the current execution context) and marks all reachable objects as 'active'.
2. Sweep Phase: The engine traverses the heap and recovers memory from any objects not marked as active (unreachable).