Aarvin Roshin Posts - Answer Overflow

Aarvin Roshin

•Created by Aarvin Roshin on 2/15/2025 in #questions

Fine-Grained Reactivity (Signals) in Qwik

Qwik (the JavaScript UI framework) uses signals for reactivity, meaning it should only re-render the DOM elements that directly depend on reactive state rather than the entire component that uses said state. However, consider the following example of conditional rendering:

import { component$ } from '@builder.io/qwik';
 
export default component$(() => {
  const show = useSignal(false);

  return (
    <>
      <button onClick$={() => show.value = !show.value}>Toggle</button>
      <div>
        {show.value ? <h1>Visible</h1> : <h1>Hidden</h1>}
      </div>
    </>
  );
});

import { component$ } from '@builder.io/qwik';
 
export default component$(() => {
  const show = useSignal(false);

  return (
    <>
      <button onClick$={() => show.value = !show.value}>Toggle</button>
      <div>
        {show.value ? <h1>Visible</h1> : <h1>Hidden</h1>}
      </div>
    </>
  );
});

In this case, Qwik should only re-render the contents of the <div> when show is updated. I don't understand, however, how Qwik knows what to re-render in this case. Even is show.value is behind a Proxy, there's no way for it to know specifically which element it's being accessed in. If this code was running in React, React could know that show is being accessed in the component, but would re-render the entire component. If you were to write this code in Solid (another signals-based framework), you would use the custom <Show> component to tell Solid a signal is being used. How does Qwik know to re-render only the <div>'s contents and not the entire component when the signal is being used in a ternary outside of Qwik's knowledge? Is it just bundler magic, an obscure JavaScript feature, or am I missing something obvious?

3 replies

Gaming

Programming