State management in react-scan codebase.

#statemanagement #opensource #reactscan #signal

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 will find Set, Map but I don’t know what signal here is. Let’s find out.

signal is imported from preact as shown below

import { type Signal, signal } from '@preact/signals';

Signals in Preact

Signals are reactive primitives for managing application state.

What makes Signals unique is that state changes automatically update components and UI in the most efficient way possible. Automatic state binding and dependency tracking allows Signals to provide excellent ergonomics and productivity while eliminating the most common state management footguns.

Signals are effective in applications of any size, with ergonomics that speed up the development of small apps, and performance characteristics that ensure apps of any size are fast by default.

How this state is used in react-scan?

I searched for signals and found that it is used in 30 files.

I have picked some instances where this state is used.

core/monitor/performance.ts

// todo: update monitoring api to expose filters for component names
export function initPerformanceMonitoring(options?: Partial<PathFilters>) {
  const filters = { ...DEFAULT_FILTERS, ...options };
  const monitor = Store.monitor.value;
  if (!monitor) return;

scan/web/views/index.tsx

export const Content = () => {
  const isInspecting = useComputed(
    () => Store.inspectState.value.kind === 'inspecting',
  );

  return (
    <div

scan/src/web/widget/resize-handle.tsx

 const updateVisibility = () => {
      const isFocused = Store.inspectState.value.kind === 'focused';
      const shouldShow = signalWidgetViews.value.view !== 'none';
      const isVisible =
        (isFocused || shouldShow) &&
        getHandleVisibility(
          position,
          signalWidget.value.corner,
          signalWidget.value.dimensions.isFullWidth,
          signalWidget.value.dimensions.isFullHeight,
        );

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@thinkthroo

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects