📱 Mobile Dev

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.

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.

Flipper: A Desktop Debugger for React Native

Flipper is a desktop debugging platform for React Native, acting like Chrome DevTools for your mobile app. It connects to your local Metro server, letting you inspect component trees, view logs, and trigger reloads. The main footgun: the project is archived.

React Native's Performance Monitor Overlay

Think of it as a quick, in-app speedometer for your app's performance. Toggle it from the Dev Menu for a live overview on your screen. The footgun: it's only a guide, not a precise tool for deep performance analysis.

Connect React Native Apps to BLE Hardware

react-native-ble-plx is the bridge from your RN app to physical BLE hardware. Use it to scan for, connect to, and exchange data with peripherals like sensors or smart locks, without writing native code.

Local Notifications: Your App's On-Device Messenger

Local notifications are messages your app sends to itself on the user's device, no server needed. Use them for timers, reminders, or download progress. The footgun: forgetting to create Android Notification Channels will cause your alerts to fail silently.

React Native Push Notifications: Permissions First

Think of push notifications as your app's mailbox. Your server sends a message, but your React Native app must ask the user for permission to show it. This is key for sending alerts via Firebase, but on iOS, silent failures occur if you don't request.

Using Device Motion Sensors in React Native

Treat device sensors as a data stream. Instead of polling, subscribe to an observable that emits readings for acceleration or rotation. This is for building compasses, shake detection, or AR views.

React Native Camera Access: Permissions and Setup

Accessing the camera is a two-part contract: declare your intent in native config files, then ask the user for permission at runtime. This is required for any photo, video, or scanning feature.

React Native's Share API: Use the Native Share Sheet

The React Native Share API opens the native OS share sheet, letting users share content like URLs or text. It provides a familiar UI with a single cross-platform method call.

Handling Permissions in React Native

A unified permissions API gives you one way to request device features, avoiding separate logic for iOS and Android. It's essential for apps needing the camera or location. The main footgun is forgetting to configure the native project files.

Shared Element Transitions: Morphing Views Across Screens

Morph a component from one screen to another during navigation. By giving two components the same sharedTransitionTag, Reanimated animates the view's properties (size, position) between screens for a seamless transition.

withTiming: Animate Values Over a Set Duration

withTiming is your CSS transition for React Native animations. You define a target value, a duration, and an easing curve to create predictable, time-based animations like fades or size changes.

useNativeDriver: Offload Animations from the JS Thread

useNativeDriver offloads animations from the JavaScript thread to the native UI thread for smoother performance. Use it in Animated API calls to prevent dropped frames.

Animated: Drive Styles with Values, Not Setters

React Native's Animated API lets you drive styles with a value, not manual setters. Use it for performant fades and slides. The biggest footgun is forgetting useNativeDriver: true, which keeps animations smooth by running them off the JS thread.

Animated.Value: The Driver for React Native Animations

Animated.Value is a single number that drives multiple UI properties, like one dimmer switch controlling many lights. Use it to fade, move, or scale components. The main footgun: you cannot read its value synchronously and must use an asynchronous listener.

Android Product Flavors for App Environments

Android Product Flavors let you build distinct app variants (like dev, staging, prod) from one codebase, each with its own configuration. Use this for separate builds or white-labeling.

Why Xcode Schemes Aren't in React Native 'Get Started' Docs

React Native's 'Get Started' docs favor frameworks like Expo, which handle build environments for you. Xcode Schemes and Configurations are powerful tools you use when managing the native iOS project yourself, a layer deeper than the basics.

Linking Native Dependencies in React Native

Installing a native library is a two-step process: fetch the JS code, then link the native iOS/Android parts. This is required for packages like react-native-webview that need native APIs. The footgun is forgetting to run pod install for iOS and rebuild.