Core Types
Fiber
The Fiber type represents a React Fiber node. This is imported from the bippy package and provides access to React’s internal fiber tree structure.
import type { Fiber } from 'bippy';
type - The component typememoizedState - Component statememoizedProps - Component propsalternate - Previous fiber versiontag - Fiber node type (FunctionComponent, ClassComponent, etc.)
Render
Represents a single render event for a component.
interface Render {
phase: RenderPhase;
componentName: string | null;
time: number | null;
count: number;
forget: boolean;
changes: Array<Change>;
unnecessary: boolean | null;
didCommit: boolean;
fps: number;
}
The render phase (mount, update, or unmount).
Display name of the component.
Render time in milliseconds.
Number of times rendered.
Whether the component uses React Forget (React Compiler) memoization.
Array of detected changes (props, state, or context).
Whether the render was unnecessary (when trackUnnecessaryRenders is enabled).
Whether the render resulted in a DOM commit.
Current frames per second when the render occurred.
RenderPhase
Enumeration of React render phases.
enum RenderPhase {
Mount = 0b001,
Update = 0b010,
Unmount = 0b100,
}
Change Types
Change
Union type representing all possible change types.
type Change = StateChange | PropsChange | ContextChange;
StateChange
Represents a state change in a component.
type StateChange =
| FunctionalComponentStateChange
| ClassComponentStateChange;
FunctionalComponentStateChange
interface FunctionalComponentStateChange {
type: ChangeReason.FunctionalState;
value: unknown;
prevValue?: unknown;
count?: number;
name: string;
}
ClassComponentStateChange
interface ClassComponentStateChange {
type: ChangeReason.ClassState;
value: unknown;
prevValue?: unknown;
count?: number;
name: 'state';
}
PropsChange
Represents a prop change.
interface PropsChange {
type: ChangeReason.Props;
name: string;
value: unknown;
prevValue?: unknown;
count?: number;
}
ContextChange
Represents a context change.
interface ContextChange {
type: ChangeReason.Context;
name: string;
value: unknown;
prevValue?: unknown;
count?: number;
contextType: number;
}
ChangeReason
Enumeration of change reasons.
enum ChangeReason {
Props = 0b001,
FunctionalState = 0b010,
ClassState = 0b011,
Context = 0b100,
}
Aggregated Types
AggregatedRender
Aggregated render data for a component.
interface AggregatedRender {
name: string;
frame: number | null;
phase: number;
time: number | null;
aggregatedCount: number;
forget: boolean;
changes: AggregatedChange;
unnecessary: boolean | null;
didCommit: boolean;
fps: number;
computedKey: OutlineKey | null;
computedCurrent: DOMRect | null;
}
AggregatedChange
interface AggregatedChange {
type: number; // Bitwise union of ChangeReason
unstable: boolean;
}
Data Types
RenderData
Tracking data for component renders.
interface RenderData {
selfTime: number;
totalTime: number;
renderCount: number;
lastRenderTimestamp: number;
}
ChangesPayload
Payload containing all types of changes.
interface ChangesPayload {
propsChanges: Array<PropsChange>;
stateChanges: Array<FunctionalComponentStateChange | ClassComponentStateChange>;
contextChanges: Array<ContextChange>;
}
ChangesListener
Callback type for listening to changes.
type ChangesListener = (changes: ChangesPayload) => void;
Store Types
StoreType
Internal store structure.
interface StoreType {
inspectState: Signal<States>;
wasDetailsOpen: Signal<boolean>;
lastReportTime: Signal<number>;
isInIframe: Signal<boolean>;
fiberRoots: WeakSet<Fiber>;
reportData: Map<number, RenderData>;
legacyReportData: Map<string, RenderData>;
changesListeners: Map<number, Array<ChangesListener>>;
interactionListeningForRenders: ((fiber: Fiber, renders: Array<Render>) => void) | null;
}
Utility Types
OutlineKey
String key for identifying outlines.
type OutlineKey = `${string}-${string}`;
LocalStorageOptions
Options that can be persisted to localStorage.
type LocalStorageOptions = Omit<
Options,
'onCommitStart' | 'onRender' | 'onCommitFinish'
>;
Example Usage
import { scan } from 'react-scan';
import type { Fiber, Render } from 'react-scan';
scan({
onRender: (fiber: Fiber, renders: Array<Render>) => {
const render = renders[0];
if (render.time && render.time > 16) {
console.warn(`Slow render: ${render.componentName}`, {
time: render.time,
phase: render.phase,
changes: render.changes,
fps: render.fps,
});
}
},
});
Analyzing Changes
import type { Change, ChangeReason } from 'react-scan';
function analyzeChanges(changes: Array<Change>) {
const propChanges = changes.filter(c => c.type === ChangeReason.Props);
const stateChanges = changes.filter(
c => c.type === ChangeReason.FunctionalState || c.type === ChangeReason.ClassState
);
const contextChanges = changes.filter(c => c.type === ChangeReason.Context);
console.log('Props changed:', propChanges.length);
console.log('State changed:', stateChanges.length);
console.log('Context changed:', contextChanges.length);
}
See Also