React Native

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

Jotai for React Native: Atomic State, Native Performance

Jotai brings minimalist, atomic state management to React Native, treating state as small, independent pieces. It's ideal for sharing state without prop drilling and offers full compatibility out of the box, including persistence via atomWithStorage.

Redux Middleware: Intercepting Actions Before Reducers

Redux middleware is like an Express middleware for your state, intercepting actions before they hit the reducer. It's used for logging, crash reporting, or async API calls. The footgun is forgetting to call next(action), which silently blocks the action.

Redux Saga: Managing Side Effects with Generators

Redux Saga runs side effects in a separate thread-like process. It listens for Redux actions and executes complex async tasks, like API calls, keeping that logic out of your components.

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.

Immer: Write Mutable Code for Immutable State

Immer lets you write simple, mutable-style code to produce an immutable next state. It's essential in Redux or with React's useState to avoid complex spread operators for deep updates. The footgun: mutations are only safe inside Immer's produce function.

React Native: Making Network Requests with Fetch

fetch is your app's tool for requesting server data. It's asynchronous, returning a promise for a future response. Use it for API calls like loading profiles or posting updates. The footgun: always catch errors, or they will fail silently.

Axios: A Simpler Way to Make HTTP Requests

Axios simplifies making network requests by wrapping native browser APIs in a promise-based client. Use it to GET or POST data in any JavaScript app. The main footgun is forgetting requests are asynchronous; you must use async/await to get the data.

TanStack Query: Manage Server State, Not Client State

TanStack Query treats server data as a cache, not local state. It automates fetching, caching, and background updates to keep your React Native app in sync with your backend.

Axios Interceptors: Middleware for Your API Calls

Axios Interceptors are like middleware for your API calls, letting you globally modify requests before they're sent or responses before they're handled. Use them to inject auth tokens or log activity. The footgun: request interceptors run last-in-first-out.