📱 Mobile Dev

React Redux: Connecting Components to a Global Store

React Redux connects your React UI to a global Redux state store, letting components read data and dispatch updates. It's used to avoid "prop drilling" shared state across the app.

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.

React Context API: Avoid Prop Drilling

React Context is like a global announcement system for a component tree, letting distant children access data without passing it through every intermediate component. Use it for app-wide state like themes or user authentication.

Props Drilling: Passing Data Through Components

Props drilling is passing data through components that don't need it, just to get it to a deeply nested child. It's React's most direct way to share state down the component tree. The footgun: this couples intermediate components to data they never use.

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.

SectionList: Displaying Grouped Data Efficiently

SectionList renders long lists grouped into sections, like a contact list. It virtualizes content, rendering only visible items to save memory. A common footgun: it won't re-render on external state changes unless you pass that state via the extraData prop.

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.

Native Stack Navigator: Native Performance, Less Customization

Native Stack Navigator uses the OS's built-in screen management for smooth, performant transitions. Use it for standard screen stacks where a native look and feel is key.

Nested Navigators: Building Complex UI Flows

Think of nested navigators as UI building blocks, placing one navigator (like tabs) inside a screen of another (a stack). This creates flows like a main tab bar inside a stack for modals.

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.