Hot Reload

Headless UI refers to component libraries that provide behavior, state management, and accessibility logic without any predefined styling or markup. Libraries like Radix Primitives, Headless UI by Tailwind Labs, and React Aria give developers full control over visual presentation while handling complex patterns like focus management, keyboard navigation, and ARIA attributes. This approach decouples functionality from design, making it ideal for custom design systems.

Code splitting is an optimization technique that breaks a JavaScript bundle into smaller chunks that are loaded on demand, rather than forcing users to download the entire application upfront. In React, this is achieved through `React.lazy()` and dynamic `import()` statements, which create separate bundles loaded only when the corresponding component or route is accessed. This dramatically improves initial load times, especially for large single-page applications with many routes.

Color contrast is the measurable difference in luminance between foreground text (or UI elements) and their background. WCAG guidelines require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text to ensure readability for users with visual impairments. Tools like Chrome DevTools, Stark, and WebAIM's contrast checker help developers verify compliance during development.

The React Native New Architecture is a fundamental rewrite of React Native's internals, replacing the asynchronous bridge with a JavaScript Interface (JSI) that enables direct, synchronous communication between JavaScript and native code. It consists of three pillars: Fabric (a new rendering system), Turbo Modules (a faster native module system), and Codegen (automatic type-safe native code generation from JS specs). This architecture significantly improves performance, reduces startup time, and enables concurrent rendering features from React 18.

Turbo Modules are the next-generation native module system in React Native's New Architecture, replacing the traditional bridge-based modules. They use the JavaScript Interface (JSI) for direct, synchronous communication between JavaScript and native code, eliminating the serialization overhead of the old JSON bridge. Turbo Modules also support lazy loading — they're only initialized when first accessed rather than at app startup, which significantly improves launch performance.

CSS Grid is a two-dimensional layout system that lets you define rows and columns simultaneously, making it ideal for complex page layouts. Unlike Flexbox which works in one axis at a time, Grid allows you to place items precisely in both horizontal and vertical directions using named areas or line numbers. Features like `grid-template-areas`, `auto-fill`, and `minmax()` make it possible to create responsive layouts with minimal code.