More in React Native — page 5
useNativeDriver in the Animated API
WHAT IT TESTS: understanding animation performance and the JS bridge. OUTLINE: native driver runs animations on the UI thread so they stay smooth even if JS is busy, but only supports non-layout props like transform and opacity.
Responsive layout across form factors
WHAT IT TESTS: responsive, form-factor-aware layout. OUTLINE: drive layout from dimensions and breakpoints via useWindowDimensions, react to orientation changes, avoid hardcoded OS checks. RED FLAG: branching on Platform.OS to detect a tablet.
Designing a native map UI component
WHAT IT TESTS: native UI component architecture and bridging. OUTLINE: wrap each platform's native view, expose props mapped to native setters and events as bubbling callbacks, unify behind one JS API.
Conditional logic with Platform.Version
WHAT IT TESTS: OS-version-aware branching. OUTLINE: Platform.Version is a number on Android (API level) and a string on iOS; gate features by version to use new APIs only where supported. RED FLAG: comparing the iOS string version as a number.
Platform files versus Platform.OS checks
WHAT IT TESTS: choosing the right platform-divergence tool. OUTLINE: use platform files for large divergence and platform-only deps, use Platform.OS for small inline tweaks.
Cross-platform shadow with Platform API
WHAT IT TESTS: platform-conditional styling. OUTLINE: iOS uses shadowColor/Offset/Opacity/Radius, Android uses elevation; merge both via Platform.select inside a style. RED FLAG: setting only shadow props and expecting a shadow on Android.
Platform-specific file extensions
WHAT IT TESTS: knowledge of platform file resolution. OUTLINE: name files Component.ios.js and Component.android.js; import without the extension and the bundler picks the right one per platform. RED FLAG: thinking you must import the extension explicitly.
Apollo's normalized cache
WHAT IT TESTS: understanding GraphQL client caching. OUTLINE: Apollo flattens query results into entities keyed by type plus id, so one object is stored once and shared, updating everywhere at once.
Offline data persistence and mutation queue
WHAT IT TESTS: designing offline reads plus a sync queue. OUTLINE: persist reads to local storage, store mutations in a durable queue with client ids and status, drain and reconcile on reconnect via NetInfo.
Optimistic UI updates for actions
WHAT IT TESTS: perceived-performance technique with rollback. OUTLINE: update UI immediately on the assumption of success, send the request, then confirm or roll back on failure. RED FLAG: applying optimistic state without any rollback or error path.
GraphQL versus REST data fetching
WHAT IT TESTS: understanding of query-driven fetching. OUTLINE: one endpoint, client-specified fields avoid over- and under-fetching; Apollo's useQuery returns loading, error, and data while caching results.
Cancelling fetch with AbortController
WHAT IT TESTS: lifecycle-aware async cleanup. OUTLINE: pass an AbortController signal to fetch and call abort() on unmount to avoid wasted work, race conditions, and state updates on gone components. RED FLAG: ignoring cleanup and setting state after unmount.
Axios interceptors for auth headers
WHAT IT TESTS: cross-cutting request handling. OUTLINE: interceptors are hooks that run before requests or after responses, centralizing concerns like auth, logging, and token refresh. RED FLAG: attaching the token manually in every call site.
Robust network error handling strategy
WHAT IT TESTS: differentiated error handling. OUTLINE: classify errors as 4xx, 5xx, or connectivity; retry transient failures with backoff, surface actionable messages, and check NetInfo. RED FLAG: one generic catch that retries everything, including 400s.
Axios advantages over fetch
WHAT IT TESTS: knowledge of HTTP client ergonomics. OUTLINE: Axios auto-parses JSON, rejects on HTTP error status, and offers interceptors, timeouts, and cancellation out of the box. RED FLAG: claiming fetch rejects on 404 or 500.
Offline-capable state architecture
WHAT IT TESTS: end-to-end offline architecture. OUTLINE: persist state locally, queue mutations while offline, apply optimistic updates, then sync and reconcile conflicts on reconnect. RED FLAG: assuming connectivity and only caching reads with no write queue.
State normalization for relational data
WHAT IT TESTS: modeling relational data in a flat store. OUTLINE: store entities by id in lookup tables, reference relationships by id, avoid nesting and duplication. RED FLAG: deeply nested arrays that force cascading updates and stale duplicates.
Memoized selectors with Reselect
WHAT IT TESTS: knowledge of derived state and re-render control. OUTLINE: selectors encapsulate state reads, Reselect memoizes computed results by input identity, preventing recomputation and unnecessary re-renders.
Redux versus Zustand state management
WHAT IT TESTS: judgment about state-library tradeoffs. OUTLINE: Redux uses actions, reducers, and a Provider with structured boilerplate; Zustand offers a minimal hook-based store with no provider and selective subscriptions.
Handling async API calls in Redux
WHAT IT TESTS: understanding of async side effects in a synchronous store. OUTLINE: middleware intercepts dispatched actions, Thunk dispatches functions for simple flows, Saga uses generators for complex orchestration.