## Following the thread across files In Levels 1 through 6, you learned to read individual components. But real features do not live in a single file. When a user clicks "Add to Cart," the action might flow through five or six files before the screen updates. Tracing a feature means following that thread from start to finish. It is the single most useful skill for understanding a React codebase — and it uses everything you have learned. --- ### The tracing strategy Here is a six-step process that works for any feature: 1. **Start at the page component** — find the page where the feature lives 2. **Find the interactive element** — the button, form, or link the user interacts with 3. **Follow the event handler** — what function runs when the user clicks? 4. **If it calls a custom hook, go to that file** — hooks often contain the real logic 5. **If it makes an API call, note the endpoint** — this is where data leaves the browser 6. **Follow the state update back to the render** — how does the screen change? Import statements are your navigation system at every step. They tell you which file to open next. --- ### Complete example: "Add to Cart" Let us trace what happens when a user clicks "Add to Cart" on a product page. We will visit every file involved. #### Step 1: Start at the page component From `App.tsx`, we know the product page is at the route `products/:id`, rendered by `ProductDetail`: ```tsx // App.tsx } /> ``` We open `src/pages/ProductDetail.tsx`. #### Step 2: Find the interactive element Inside `ProductDetail.tsx`, we scan the JSX for the Add to Cart button: ```tsx // src/pages/ProductDetail.tsx import { useParams } from "react-router-dom"; import { useProduct } from "../hooks/useProduct"; import { useCart } from "../hooks/useCart"; import { ProductInfo } from "../components/ProductInfo"; import { AddToCartButton } from "../components/AddToCartButton"; const ProductDetail = () => { const { id } = useParams<{ id: string }>(); const { product, isLoading, error } = useProduct(id!); const { addItem } = useCart(); if (isLoading) return

; if (error) return

Error: {error}

; if (!product) return

Product not found

; return (

addItem(product)} />

); }; ``` The button is ``. When clicked, it calls `addItem(product)`. Where does `addItem` come from? The import says: `useCart` hook. #### Step 3: Follow the event handler The `AddToCartButton` component is simple — it just renders a button and calls the onClick prop: ```tsx // src/components/AddToCartButton.tsx interface AddToCartButtonProps { onClick: () => void; } const AddToCartButton = ({ onClick }: AddToCartButtonProps) => { return ( ); }; ``` This is a "dumb" component — it does not know anything about carts. It just fires the callback. The real logic is in the `useCart` hook. #### Step 4: Follow the custom hook We open `src/hooks/useCart.ts`: ```tsx // src/hooks/useCart.ts import { useContext } from "react"; import { CartContext } from "../context/CartContext"; import { addToCart } from "../api/cart"; export const useCart = () => { const { cartItems, setCartItems } = useContext(CartContext); const addItem = async (product: Product) => { const updatedCart = await addToCart(product.id); setCartItems(updatedCart.items); }; const itemCount = cartItems.reduce((sum, item) => sum + item.quantity, 0); return { cartItems, addItem, itemCount }; }; ``` Now we can see the flow: `addItem` calls an API function `addToCart`, then updates the cart state via context. The `itemCount` is derived (calculated directly — good pattern!). #### Step 5: Follow the API call We open `src/api/cart.ts`: ```tsx // src/api/cart.ts import { apiClient } from "./client"; export const addToCart = async (productId: string) => { const response = await apiClient.post("/cart/items", { productId }); return response.data; }; ``` This sends a POST request to `/cart/items` with the product ID. The server adds the item and returns the updated cart. #### Step 6: Follow the state update back to the render Back in `useCart`, after the API call succeeds, `setCartItems(updatedCart.items)` updates the cart context. Any component that uses `useCart()` or reads from `CartContext` will re-render with the new data. Where is the cart count displayed? Probably in the header: ```tsx // src/components/Header.tsx import { useCart } from "../hooks/useCart"; const Header = () => { const { itemCount } = useCart(); return (

{itemCount}

); }; ``` The header uses the same `useCart` hook, which reads from the same context. When `setCartItems` updates the context, both the ProductDetail page and the Header re-render. The cart badge updates. --- ### The complete thread Let us map the entire flow: ``` User clicks "Add to Cart" → AddToCartButton calls onClick prop → ProductDetail passes addItem(product) → useCart.addItem calls addToCart API function → POST /cart/items to the server → Server adds item, returns updated cart → setCartItems updates CartContext → Header re-renders, cart badge shows new count → ProductDetail re-renders (if it displays cart info) ``` **Files visited:** ProductDetail.tsx → AddToCartButton.tsx → useCart.ts → cart.ts (API) → CartContext.tsx → Header.tsx Six files. One button click. This is normal in a real React app. --- ### Import statements are your map Notice how we navigated the entire feature using import statements: - `ProductDetail` imports `useCart` → we know to check the hook - `useCart` imports `CartContext` → we know state is in context - `useCart` imports `addToCart` → we know there is an API call - `Header` imports `useCart` → we know the header reads cart data Every `import` line is a road on the map. If you can follow imports, you can trace any feature. --- ### Common feature patterns Most features follow one of these patterns: **Read pattern** (view data): ``` Page → useEffect/hook fetches data → API call → setState → render ``` **Write pattern** (submit data): ``` Form/Button → event handler → API call → update state → re-render ``` **Shared state pattern** (state affects multiple components): ``` Component A → updates context/store → Component B re-renders ``` **Navigation pattern** (move between pages): ``` Link/navigate call → router matches new route → new page component renders ``` Once you recognize which pattern a feature uses, tracing it becomes much faster. --- ### Practice: trace it yourself Here is a challenge. Given these imports, trace what happens when a user submits a contact form: ```tsx // src/pages/Contact.tsx import { useState } from "react"; import { ContactForm } from "../components/ContactForm"; import { submitContact } from "../api/contact"; import { useToast } from "../hooks/useToast"; ``` Without even seeing the code, you can outline the flow: 1. The Contact page renders a ContactForm component 2. The form collects data and calls a submit callback (probably passed as an onSubmit prop) 3. The page handler calls `submitContact` — an API function that sends data to the server 4. After success, `useToast` probably shows a success notification Imports told you the entire story. The code just fills in the details.

8.2 Tracing a Feature