Search
Find a bite, explore a topic or look for a role.
Results for “React”
Bites 747
Shopify FlashList: Fixing React Native's Blank Cells
FlashList is a performant drop-in replacement for React Native's FlatList. It recycles components to eliminate blank cells during fast scrolling in long lists. The footgun is assuming it fixes all performance issues, not just rendering.
VirtualizedList: The Engine Behind React Native Lists
VirtualizedList is the engine behind React Native's efficient lists, rendering only visible items to save memory. Use it when FlatList isn't flexible enough, like for immutable data. The main footgun: component state is lost when items scroll out of view.
Memoizing List Items with `React.memo`
Wrap list items in React.memo to prevent them from re-rendering when their props are unchanged. In a FlatList, this stops items from re-rendering just because the list scrolled, keeping the UI smooth. The footgun is assuming it's a free optimization.
React Native: Infinite Scroll with onEndReached
The onEndReached prop is a callback that fires when you scroll near a list's end, letting you fetch more data. Use it in FlatList for feeds or catalogs. The main footgun: it can fire multiple times, so use a loading flag to prevent redundant API.
FlatList: Performant Virtualized Lists in React Native
FlatList is a "window" over your data, only rendering visible items to save memory and keep scrolling smooth. It's ideal for long lists like feeds or contacts. The main footgun: if items don't update, you forgot to pass changing state to the extraData prop.
React Navigation State: The App's Internal Map
Think of React Navigation's state as a JS object that's the single source of truth for your app's screen history. It's essential for advanced tasks like state persistence or deep linking. The footgun: nested navigator state isn't guaranteed to exist.
Type-Safe Navigation in React Native with TypeScript
React Navigation uses TypeScript to type-check screens and params, giving you better autocompletion. You define types for route params and augment a global navigator type so hooks like useNavigation understand your app's structure.
React Native Auth Flows: Conditional Navigators
Think of your app as having two sets of maps: one for guests, one for members. React Navigation swaps the entire map when a user logs in, not just moves them. This is the key to preventing users from back-navigating to the login screen after.
React Navigation Lifecycle: Screens Don't Unmount
Unlike the web, React Native screens don't unmount when you navigate away; they stay mounted to preserve state. This means a standard useEffect only runs once. To run code when a screen is shown, you must listen for the focus event.
React Navigation: Configuring Screen Options
Treat screen options like CSS for your React Navigation screens, letting you style headers and tabs. Apply styles to a single Screen with the options prop, or to a Group of screens with screenOptions.
Escape Prop Drilling with React Navigation Hooks
React Navigation hooks let components control navigation without prop drilling. useNavigation gives you the navigation object to change screens, while useRoute provides data about the current screen. The footgun: they only work inside a navigator.
Passing Data to Routes in React Native
Think of it like passing arguments to a function. When you navigate to a new screen, you give it the data it needs, like a product ID. This is key for master-detail views. The footgun: only pass JSON-serializable data to avoid breaking state persistence.
React Native Reanimated: Off-Thread Animations
Reanimated moves animations off the busy JavaScript thread onto the native UI thread. This ensures smooth, 60-120 fps performance for gestures and transitions, even during heavy JS computation.
React Native Slider: Selecting a Value from a Range
A slider is a visual control for selecting a numeric value from a range, like a volume knob. Use it for settings like brightness or price filters. The main footgun is forgetting to capture the slider's value in your app's state on value change.
React Native's Controlled Switch Component
The Switch component is a 'controlled' input; it doesn't manage its own state. You use it for on/off settings by telling it what to display via the value prop and updating that state in the onValueChange callback. The footgun is forgetting this link.
React Native's Basic Button Component
The Button component is React Native's 'easy button' for basic user interactions. It renders a native-looking button with just a title and onPress handler. Its main footgun is its lack of styling options; for custom designs, use Pressable instead.
React Native's Dimensions API: The Manual Approach
React Native's Dimensions API is a low-level way to get a one-time snapshot of screen or window sizes. Use it outside React components or when you need to subscribe to changes manually. The footgun is caching its value, as it won't update on rotation.
React Native Modal: Presenting Content Above Other Views
A Modal is a temporary screen takeover, presenting content above your current view. Use it for critical alerts or forms that demand user focus. The main footgun: forgetting onRequestClose disables the Android back button, trapping your user.
React Native TextInput: Handling User Input
TextInput is your app's keyboard entry point. Use it for search bars and forms, configuring features like auto-capitalization and keyboard type. Be careful with styling: Android adds a default underline, and multiline mode can break single-side border styles.
React Native's Image Component
The Image component is React Native's tool for displaying pictures from network URLs, local app assets, or the device's camera roll. The biggest footgun: you must manually set width and height for any image loaded from a URL or it won't appear.