Understanding Signals In React-Scan: A State Management Primer

React-Scan uses Preact's Signals for state management. Signals are reactive primitives that automatically update components & UI when state changes, providing excellent ergonomics & performance.

In this article, we review how the store is managed in react-scan source code. The below code is picked from packages/scan/core/src/index.ts.

export const Store: StoreType = {
  wasDetailsOpen: signal(true),
  isInIframe: signal(
    typeof window !== 'undefined' && window.self !== window.top,
  ),
  inspectState: signal<States>({
    kind: 'uninitialized',
  }),
  monitor: signal<Monitor | null>(null),
  fiberRoots: new Set<Fiber>(),
  reportData: new Map<number, RenderData>(),
  legacyReportData: new Map<string, RenderData>(),
  lastReportTime: signal(0),
};

    
    

    
    




You wi...

Read the full article