How to Slash IDE Lag: Proven React Performance Hacks for OpenSumi

Re‑render

OpenSumi uses React for its view layer, so the main performance goal is to reduce unnecessary re‑renders. The article references Dan Abramov’s "Before You memo()" approach, which splits components to isolate stable parts. However, OpenSumi’s heavy reliance on MobX makes many models effectively global, causing widespread re‑renders when any observable changes.

class MyService {
  @Autowried()
  private viewModel: IMyViewModel;

  private updateView(value) {
    // someState is an observable, view can use it directly
    this.viewModel.someState = value;
  }
}

Because props cascade down the component tree, any change triggers renders of all descendants. Simple memo and useMemo provide limited benefit without refactoring the global state.

Search Panel

The search panel contains only a few inputs and buttons, yet global state changes cause the entire panel to re‑render. By extracting each input/button into independent components (e.g., SearchInput, SearchExclude, SearchInclude, SearchResult) and wrapping them with React.memo, unnecessary renders are avoided.

const SearchView = () => {
  const searchService = useInjectable<ISearchService>(SearchService);
  return (
    <div>
      <Input value={searchService.uiState.searchKeyWord} />
      <Checkbox checked={searchService.uiState.checkbox} />
      <Input />
      <Input />
    </div>
  );
};

const SearchView = () => {
  const searchService = useInjectable<ISearchService>(SearchService);
  return (
    <div>
      <SearchInclude includes={searchService.includes} />
    </div>
  );
};

const SearchInclude = React.memo((props) => (<Input value={props.includes} />));

Unassuming Menu

Menus appear trivial but are instantiated many times. Each render creates new menuitem objects, leading to thousands of redundant creations (e.g., GitLens creates ~3k menu instances during a drag). Caching menu instances solves the issue.

private getInlineMenu(viewItemValue: string) {
  if (this.cachedMenu.has(viewItemValue)) {
    return this.cachedMenu.get(viewItemValue)!;
  }
  // create new menu
  this.cachedMenu.set(viewItemValue);
}

TreeView

TreeViews rely on RecycleTree, which is performant, but passing unnecessary width props causes full re‑renders during panel resizing. Removing the width prop eliminates the extra work.

// before
<RecycleTree ...otherProps width={width} height={height} />

// after
<RecycleTree ...otherProps height={height} />

Icon

GitLens registers thousands of icons for committers. Each icon is turned into a CSS class and injected into a <style> tag. Repeating this thousands of times forces massive DOM re‑paints. The fix batches class insertion, dramatically reducing the lag.

`.${className} {background: url("${iconUrl}") no-repeat 50% 50%; background-size: contain;}`;

Restrained Events

All panels listen to global ResizeObserver events. Even when a panel is hidden (display:none), the observer still fires, causing unnecessary renders. By caching the previous size with useRef and only broadcasting when dimensions actually change, the extra render is eliminated.

interface IViewState {
  width: number;
  height: number;
}

export const Panel = ({ viewState }: { viewState: IViewState }) => {
  return (<div></div>);
};

Conclusion

The article lists several clear‑cut performance improvements in OpenSumi: reducing re‑renders with memoization, caching menus, pruning unnecessary props, batching icon style insertion, and avoiding redundant resize events. Most bottlenecks stem from simple coding oversights rather than deep architectural flaws, showing that targeted refactors can yield substantial UI speed gains.