If you enjoyed this thread:

Follow me for more on web dev & frontend content!

Read my full, in-depth blog post here: https://dev.to/michaelsolati/fighting-framework-jank-whats-not-in-the-docs-mj5

TL;DR on fighting framework jank:

1. Static Content (SVGs): Use + cloneNode() to offload parsing from the VDOM.
2. Non-Critical JS (Analytics): Use requestIdleCallback() to offload execution from the main thread.

Here's the final "FastWidget" component.

It combines both techniques. It's blazing fast because it lets the browser do all the heavy lifting, and React just manages the simple container

Fix 2: Offload non-critical JS with requestIdleCallback.

That sendAnalytics() call in useEffect is user blocking.

Wrap it in requestIdleCallback().

This tells the browser: "Run this code only when you're free and not busy with animations or input."

Fix 1: Offload static content with .

Don't make React hydrate a 1000-line static SVG.

1) Put the SVG into a in your HTML.
2) In the code, useRef on an empty .
3) In useEffect, find the template, cloneNode, and appendChild to your ref.

The "Framework Pure" Problem: Build a component with a massive SVG and an analytics call.

This is a perf nightmare!

VDOM Bloat: React hydrates 1000s of static nodes.
Blocked Thread: useEffect fires analytics immediately, blocking the main thread.

Result: Stutter, lag, jank.

Hmmm... So, this is not an area or codebase I'm familiar with, but I think I found the issue and opened a PR to fix it. Hopefully, they'll accept it, and the next release will have noise cancellation.

Sorry for the headache, but thank you for sharing!

github.com/bekriebel/fv...

Hey Adriana! So, LiveKit has noise suppression filters you can add to the clients.

If you need help, you can hit me up or check out our Slack community, where other developers can help.

docs.livekit.io/home/cloud/n...

I'm at LiveKit now!

And the fucking gusto he did it with. I hate it 🤬