# Why does a React prop stop arriving after a rename?
> Chimera CH-04 (React (higher-order component, barrel)): Why does a React prop stop arriving after a rename?
A higher-order component injects a handler prop, the wrapped components are re-exported through `export *`, and pages import the wrapped version from the barrel. The component file shows a prop that nothing in that file supplies, and the page shows no prop at all. Use a hook inside each component, re-export by name, and give the payload a type.
The code below is from a small example project we wrote for this page. The break below is read from the files, by line; the tsc result in section 3 and the LLMGRAPH output in section 7 come from real runs on this code.
Note on `before/`: that folder holds the code with the section 3 edit already applied (the `onEvent` rename in `withTracking.tsx`), written that way on purpose. It is not the pre-edit state; the pre-edit text is quoted in section 1.
## 1. The setup
The pattern is a long-standing one and its strengths are real: cross-cutting behavior like analytics is written once, components stay free of tracking code, and a page just renders ``. The app has two components, `PriceCard` and `SignupButton`, and a pricing page.
```tsx
// before/src/components/withTracking.tsx (before the edit)
export function withTracking
(
Component: ComponentType
,
) {
function Tracked(props: P) {
const onTrack: TrackFn = (payload) => track({ component: name, ...payload });
return ;
}
```
```tsx
// before/src/components/PriceCard.tsx
export function PriceCardBase({ plan, priceCents, onTrack }: Props) { // line 9
...
onClick={() => onTrack?.({ action: "select_plan", label: plan, value: priceCents })} // line 12
...
export const PriceCard = withTracking(PriceCardBase); // line 19
```
```ts
// before/src/components/index.ts
export * from "./PriceCard";
export * from "./SignupButton";
```
```tsx
// before/src/pages/Pricing.tsx
import { PriceCard, SignupButton } from "../components"; // line 1
```
## 2. Where the call path hides
- **The prop has no source in its own file.** `PriceCard.tsx` declares `onTrack?` at line 6 and calls it at line 12, and nothing there passes it. The value arrives from `withTracking.tsx` at render time.
- **The prop is optional on purpose.** The test renders `PriceCardBase` directly with its own `onTrack`, so the local type says `onTrack?`. The optional call does nothing when the prop is absent, and React gives no warning for a prop a component never received.
- **The barrel forwards more than the page uses.** `export *` re-exports every named export of each file, as the ECMAScript spec defines for star exports (see AR-02), so `PriceCardBase` and `PriceCard` are both public. The page imports `PriceCard`, a name that appears in no `export` line of the barrel.
- **The wrapper and the base have different names.** A search for who renders `PriceCardBase` finds the test. The component production renders is `PriceCard`.
## 3. The edit that breaks it, and which call is left wrong
The tracking team renames the injected prop to `onEvent`, to match a new analytics vocabulary. The change is in one file:
```tsx
// before/src/components/withTracking.tsx (edit applied)
Component: ComponentType
, // line 7 (was onTrack)
...
return ; // line 13 (was onTrack={onTrack})
```
The calls left wrong are `PriceCard.tsx:12` and `SignupButton.tsx:10`, which still call `onTrack?.(...)`. `PriceCard.tsx:6` and `SignupButton.tsx:5` still declare `onTrack?: TrackFn`. Both sides are optional props and line 13 spreads a value cast with `as P`, so the edit is not a type error. Checked with tsc 7.0.2 under `--strict`: the rename compiles silently, with no error at `PriceCard.tsx:12`, `SignupButton.tsx:10` or the spread at `withTracking.tsx:13`. (The check used a minimal React type stub; the only errors left were the missing test-package modules, and restoring the old name gave the same two.) At runtime the click handler finds `onTrack` undefined, the optional call is skipped, and plan selections and sign-up clicks stop reaching `/api/events`.
The unit test, `PriceCard.test.tsx:7`, renders `PriceCardBase` with its own `onTrack` mock and passes. The page at `Pricing.tsx:1` imports through the barrel and never mentions the prop, so a search for `onTrack` finds the two component files, the test and the HOC, and none of the three places that render the wrapped components (`Pricing.tsx:6`, `:7`, `:8`).
A variant with the same shape: rename the payload key `label` in the HOC's `track()` call. The payload type is `Record` (`track.ts:1`), so the callers at `PriceCard.tsx:12` and `SignupButton.tsx:10` keep compiling while the event shape changes.
## 4. The fix
Components get tracking from a hook, `useTracking("PriceCard")`, which returns a typed `track` function. The barrel lists each export by name, the props are exported types, and the payload is a union keyed on `action`.
```diff
--- before/src/components/PriceCard.tsx
+++ after/src/components/PriceCard.tsx
-import { withTracking, type TrackFn } from "./withTracking";
+import { useTracking } from "../tracking/useTracking";
-type Props = {
+export type PriceCardProps = {
plan: string;
priceCents: number;
- onTrack?: TrackFn;
};
-export function PriceCardBase({ plan, priceCents, onTrack }: Props) {
+export function PriceCard({ plan, priceCents }: PriceCardProps) {
+ const { track } = useTracking("PriceCard");
return (
-