Intermediate concepts in React Native, page 3
useCallback: Cache Functions Between Renders
useCallback caches a function so it's not recreated on every render. This is crucial for performance when passing callbacks as props to memoized components, preventing them from re-rendering unnecessarily.
React's useMemo Hook: Cache Expensive Calculations
useMemo is React's cache for expensive calculations, preventing re-computation on every render. Use it for heavy tasks like filtering large lists. The main footgun is an incomplete dependency array, which leads to stale, cached data.
Analyzing Your React Native Bundle Size
Think of it as an X-ray for your app's final JavaScript file. It shows which libraries take up the most space, helping you shrink your app and improve startup time. The biggest mistake is only analyzing after performance degrades; do it proactively.
Debugging React Native Performance
React Native drops frames when the JS thread overloads, not just from bad code. Complex re-renders, console.log statements, or dev mode freeze touches and animations. Never trust performance numbers from development builds; always test in release mode.
Why-Did-You-Render: Find Unnecessary React Re-renders
The why-did-you-render library is a detective for your React app, finding components that re-render unnecessarily. Use it in development to debug performance by spotting when new object or function references break memoization.
Fabric Renderer: React's Native UI Interpreter
Fabric is React Native's interpreter, translating abstract components into concrete native views for iOS and Android. It's the core renderer in the New Architecture, enabling more synchronous UI updates. The footgun is thinking it's a library you import.
React Native Testing Library: Test User Behavior, Not Code
React Native Testing Library tests components from a user's perspective. Instead of checking internal code, you find elements by visible text and simulate presses, ensuring tests survive refactors. The footgun is overusing implementation details like testID.
React Native & Jest: Automatic Native Module Mocking
Jest tests for React Native run in Node, not on a device, so native code won't work. The react-native preset automatically mocks native modules, letting you test components without a real device environment.
The `act()` Utility: Syncing Tests with React's Updates
The act() utility ensures your tests wait for React to finish updating the DOM before you make assertions. Use it to wrap component renders and state updates. The footgun is forgetting to use await with an async function, which can lead to flaky tests.
Testing Custom Hooks with `renderHook`
renderHook isolates a hook for testing by running it inside a tiny, dedicated component. Use it to verify a hook's logic and side effects without rendering a full UI. Footgun: Forgetting to wrap state updates in act() can cause flaky, unpredictable tests.
Google Play Testing Tracks: A Funnel for Safer Releases
Google Play testing tracks act as a release funnel, moving from internal QA to public beta to catch bugs early. Use them for initial checks (Internal), private betas (Closed), or public tests on the Play Store (Open).
App Store Review: The Rules of Apple's Walled Garden
Think of App Review as Apple's curation for its "walled garden," prioritizing user safety and a consistent experience. It's the final gate before your app ships. The main footgun is assuming the rules are purely objective; Apple judges subjective quality.
Expo: The New Default for React Native
Expo is the modern, production-ready default for React Native, not just a tool for prototypes. Use it for new apps to get smoother upgrades, cloud builds, and over-the-air updates out of the box.
Native Modules: Bridge JS to Native Platform APIs
Native Modules are your bridge from JavaScript to platform-specific APIs, letting your app use features not exposed by default. Use them when you need direct access to Android or iOS SDKs. The main footgun is misconfiguring Codegen in your project.
KeyboardAvoidingView: Keep Inputs Visible When Keyboard Appears
KeyboardAvoidingView prevents the on-screen keyboard from hiding your inputs. It's a wrapper that shrinks, slides, or pads its content to keep it in view. Use it for login forms or chat windows. The behavior prop acts differently on iOS vs. Android.
The React Native Gesture Handler State Machine
Think of a gesture handler as a state machine with six states. This lets you react to specific moments in a gesture's lifecycle—like BEGAN or ACTIVE—not just a single event. The footgun: ignoring the CANCELLED state, which can leave your UI broken.
Bottom Tab Navigator: Core Mobile Navigation
A Bottom Tab Navigator is the classic mobile UI for switching between top-level app sections. It lazily loads screens, mounting them only when first focused to save memory. Use it for primary navigation.
Zustand: Lightweight Global State for React
Zustand provides simple global state management for React, feeling like a shared useState hook for your whole app. Use it in small to medium apps where Redux is overkill. The main footgun is its limited ecosystem, making it a risk for large-scale apps.
useSharedValue: State for High-Performance Animations
The useSharedValue hook creates state that lives on the UI thread, bypassing React's render cycle for animations. Use it with useAnimatedStyle to drive smooth, 60fps animations. The footgun: modifying a shared value won't re-render your component.
useAnimatedStyle: Link Shared Values to Component Styles
The useAnimatedStyle hook connects a shared value to a component's style, running animations on the UI thread. It's a reactive StyleSheet for dynamic properties like opacity or transform. The footgun: never mutate shared values inside the hook.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles