// === HERMES OPTIMIZATION TECHNIQUES === // 1. Check if Hermes is running const isHermes = () => !!global.HermesInternal; console.log('Using Hermes:', isHermes()); // 2. Hermes bytecode compilation // In metro.config.js, Hermes automatically compiles your JS: // source.js → compiled.hbc (Hermes Bytecode) // The .hbc file is what ships in the APK/IPA // 3. Profile-Guided Optimization // Hermes supports basic profile-guided compilation // Record hot functions → optimize their bytecode // This is configured in the build system, not in code // 4. Memory optimization with Hermes GC // Hermes uses a moving GC — objects can be relocated in memory // This means: DO NOT hold native pointers to JS objects // Use the new architecture (JSI) for proper C++ ↔ JS references // === YOGA LAYOUT DEEP DIVE === // 5. Flexbox differences from web CSS import { View, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ // RN default: flexDirection: 'column' (web default: 'row') container: { flex: 1, // These are RN-specific defaults different from web: // flexDirection: 'column' (web: 'row') // alignItems: 'stretch' (web: 'stretch' — same) // flexShrink: 0 (web: 1) }, // Absolute positioning — same concept, simpler API overlay: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, // No z-index needed usually — later in source = higher }, // Percentage sizes halfWidth: { width: '50%', // 50% of parent's width height: '100%', // 100% of parent's height }, }); // 6. Layout performance: FLAT vs NESTED // ❌ Deep nesting — Yoga must calculate more nodes const DeepNested = () => ( Content ); // ✅ Flattened — fewer Yoga calculations const Flattened = () => ( Content ); // 7. Avoiding layout thrashing // ❌ Reading layout then immediately causing re-layout const BadPattern = () => { const [height, setHeight] = useState(0); return ( { // This fires → sets state → re-render → new layout → repeat setHeight(e.nativeEvent.layout.height); }} style={{ minHeight: height + 50 }} // Depends on height — layout loop! > Content ); }; // ✅ Use onLayout for reading, not for creating dependency loops const GoodPattern = () => { const [height, setHeight] = useState(0); return ( <> setHeight(e.nativeEvent.layout.height)}> Measured Content {/* Height used by DIFFERENT component — no loop */} Sized based on above ); };

Phase 4: React Native Internals (Critical)

Old Architecture vs New Architecture

Threading Model & Data Flow

Hermes Engine & Yoga Layout

🎤 Mock Interview