2 replies

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>

<div>

when

show

show

is updated. I don't understand, however, how Qwik knows what to re-render in this case. Even is

show.value

show.value

is behind a

Proxy

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

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>

<Show>

component to tell Solid a signal is being used.

How does Qwik know to re-render only the

<div>

<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?

TTC

Theo's Typesafe Cult•12mo ago•

2 replies

qqzmb0xjc8

Fine-Grained Reactivity (Signals) in Qwik

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>

<div>

when

show

show

is updated. I don't understand, however, how Qwik knows what to re-render in this case. Even is

show.value

show.value

is behind a

Proxy

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

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>

<Show>

component to tell Solid a signal is being used.

How does Qwik know to re-render only the

<div>

<div>

Fine-Grained Reactivity (Signals) in Qwik

Similar Threads

Fine-Grained Reactivity (Signals) in Qwik

Similar Threads

Similar Threads

Similar Threads