17. startWith: an initial value for the UI

startWith — an initial value

UIs often need to show something immediately, without waiting for server data — "Loading...", an empty list, default settings. The startWith(value) operator adds an initial value at the very front of the stream.

of('Loaded').pipe(startWith('Loading'))
// next('Loading') → next('Loaded') → complete()

Where you'll see it a lot

• Loading states: show "Loading..." until the HTTP response arrives.
• Defaults for filters: startWith('') for a search box, startWith('all') for a category.
• Any situation that needs an immediate value "before anything has happened."

const { of, startWith } = Rx;

const state$ = of('Loaded').pipe(
  startWith('Loading')
);

state$.subscribe(value => {
  console.log('State: ' + value);
});