Reactive state management with JavaScript Signals

// In React, sharing state can mean passing it down...
function Parent() {
  const [count, setCount] = useState(0);
  return ;
}

function Child({ count }) {
  // ...and down again...
  return ;
}

function GrandChild({ count }) {
  // ...until it finally reaches the destination.
  return 
{count}
;
}

The impact will also show up in centralized stores like Redux, which strive to reduce complexity sprawl but often seem to add to the problem. Signals eliminates both issues by making a centralized state simply another JavaScript file you create and import in the components. For example, here’s how a shared state module might look in Svelte:

// store.svelte.js
// This state exists independently of the UI tree.
export const counter = $state({
  value: 0
});

// We can even put shared functions in here
export function increment() {
  counter.value += 1;
}

Using this is just normal JavaScript:

 
  Click Me

Toward a Signals standard?

Historically, successful patterns that start out in libraries or individual frameworks often migrate into the language. Just think of how jQuery’s selectors influenced document.querySelector, or how Promises became part of the JavaScript standard.