React Native

CSS-in-JS is an approach where styles are written directly in JavaScript files, often co-located with the components they style. Libraries like Styled Components, Emotion, and Stitches generate unique class names at build time or runtime, eliminating style conflicts. While it enables dynamic styling based on props and full encapsulation, the trend has shifted toward zero-runtime solutions and utility-first CSS due to performance concerns.

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.

Props drilling is the practice of passing data through multiple levels of intermediate components that don't actually use the data themselves, just to get it to a deeply nested child that needs it. This creates tight coupling between components and makes refactoring painful. Common solutions include React's Context API for global-ish state, state management libraries like Zustand or Redux, or component composition patterns that restructure the tree to reduce nesting depth.

Expo is a platform and set of tools built around React Native that simplifies mobile app development by providing a managed workflow, pre-configured native modules, and over-the-air update capabilities. With Expo, you can start building without installing Xcode or Android Studio, test on physical devices via the Expo Go app, and deploy updates without app store review cycles. Expo's EAS (Expo Application Services) handles cloud builds, submissions, and updates for production apps.

Hydration is the process where a client-side JavaScript framework attaches event listeners and interactivity to server-rendered HTML markup. After the server sends pre-rendered HTML for fast initial display, the framework "hydrates" it by reconciling its virtual representation with the existing DOM and making it interactive. Hydration can be expensive on complex pages, which has led to innovations like partial hydration, progressive hydration, and React's selective hydration with Suspense.