React at 60fps: improving scrolling comments in Figma | Figma Blog

Figma improved comment-scrolling performance threefold by targeting unnecessary React work during canvas panning and zooming. Although comment pins must recalculate their positions on every viewport update, unrelated fixed-position UI components were also re-rendering. By isolating viewport-dependent updates and optimizing comment transformations, Figma moved closer to its goal of maintaining 60fps even in files with many comments.

The Performance Goal

• Figma aimed to render the editor at 60fps, which is substantially smoother than 15 or 30fps.
• Growing numbers of comments and threads exposed slowdowns while users panned and zoomed around the canvas.
• Comment pins are anchored to canvas content, so their positions must continuously respond to viewport changes.

Figma’s Rendering Architecture

• The editor combines WebGL, WebAssembly, TypeScript, and React—effectively a browser-based design tool with a dynamic React interface.
• Viewport updates are stored in Redux.
• Comment components read viewport state and calculate their positions relative to the canvas.
• Unlike static React interfaces, comments move as part of the canvas and must update frequently.

Diagnosing the Bottleneck

• Chrome Performance tools showed that JavaScript consumed most of the frame time.
• With 30 comments, approximately 68ms per frame was spent on JavaScript, producing about 19fps.
• React Profiler showed that rendering the comments themselves took only about 1.8ms.
• The larger problem was unnecessary re-rendering of fixed UI elements such as:
  • The left panel
  • Toolbar
  • Properties panel
  • Comments list
  • Other components that did not depend on viewport movement
• This revealed that viewport updates were propagating too broadly through the React component tree.

Preventing Unnecessary Re-renders

• Figma narrowed which components subscribed to viewport changes.
• Components that did not need changing viewport data were prevented from re-rendering.
• The optimization focused on separating dynamic canvas-attached comments from fixed interface elements.
• Reducing this wasted React work freed time in each frame for the comment pins that actually needed updates.

Optimizing Comment Positioning

• Comment pins must transform their positions whenever the canvas viewport changes.
• Figma optimized the transformation calculations and the way those updates were applied to the components.
• This reduced the JavaScript cost of moving many comment pins simultaneously.

Results

• Scrolling comments became roughly three times faster.
• The improvements brought performance closer to the 60fps target.
• Figma planned to continue improving performance as files and comment counts scale.

The main lesson is to profile both browser execution and React rendering separately. For highly interactive views, performance depends not only on optimizing the visible components, but also on ensuring that unrelated parts of the application do not re-render in response to high-frequency state updates.