Search
Find a bite, explore a topic or look for a role.
Results for “React”
Bites 747
Reanimated Worklets: Run JS on the UI Thread
A Reanimated worklet is a JS function that runs directly on the UI thread, bypassing the bridge for 60fps animations. They're used in hooks like useAnimatedStyle to compute styles without dropping frames. The footgun: worklets capture their entire closure.
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.
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.
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.
OTA Updates: Ship JS Fixes Without App Store Review
Over-the-Air (OTA) updates let you ship JavaScript, styling, and image changes directly to users, bypassing app store review. Use it to fix JS bugs or tweak UI between releases. The footgun: you can't update native code or change permissions this way.
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.
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.
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.
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.
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.
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.
PixelRatio: Bridge Layout Units to Physical Pixels
PixelRatio is your app's translator, converting abstract layout units into physical pixels and respecting the user's chosen font size. Use it to fetch correct image sizes and make fonts accessible. Ignoring getFontScale() creates a fixed, inaccessible UI.
PermissionsAndroid: Requesting Runtime Permissions
PermissionsAndroid lets you ask for sensitive permissions like camera or location at runtime. Use its request method to show the native Android dialog. The biggest footgun is ignoring the NEVER_ASK_AGAIN result, which requires sending the user to system…
ActionSheetIOS: Native iOS Action Menus
ActionSheetIOS presents a native iOS menu sliding up from the bottom, offering users contextual choices. It's ideal for simple actions like "Delete" or "Save" and can also trigger the native share sheet.
GraphQL: Ask for Exactly What You Need
GraphQL lets clients request exactly the data they need from a single endpoint, avoiding over-fetching. It's ideal for mobile apps, but beware of the N+1 problem where one query can trigger many database lookups on the backend.
AbortController: Stop Fetch Requests You No Longer Need
An AbortController is a kill switch for network requests. Use it to cancel a fetch when a user navigates away. The main footgun is not handling the AbortError that fetch throws, which can look like a real network failure.
Memoized Selectors: Avoid Needless Re-renders
A memoized selector caches its result, re-running only if its inputs from the Redux store change. Use it to compute derived data like a filtered list without triggering needless re-renders.
Redux Toolkit: The Opinionated Way to Write Redux
Redux Toolkit (RTK) is the official, opinionated way to write Redux, bundling best practices to eliminate boilerplate. Use it for any new Redux app to simplify store setup and state updates.
Redux: A Single Source of Truth for App State
Redux centralizes app state into a single "store." Instead of components managing state locally, they dispatch actions to a global reducer. Use it when many components share data.
useReducer: Manage Complex State with Predictable Actions
useReducer centralizes complex state logic. Instead of setting state directly, you "dispatch" actions describing what happened. It's ideal for state with many sub-values or when the next state depends on the previous one.