Templates & Binding — Series 3

Preview — 3 of 10 questions

How many times does 'recomputing' get logged?

javascript

const price = signal(10);
const qty = signal(2);
const total = computed(() => {
  console.log('recomputing');
  return price() * qty();
});

console.log(total()); // read #1
console.log(total()); // read #2, no signal changed in between

AOnce — computed() memoizes its result and only recomputes when one of the signals it read (price or qty) actually changes

BTwice — once per call to total()

CZero times — computed() is lazy and never runs unless subscribed to explicitly

DIt depends on whether the component uses OnPush

What is the logging order?

javascript

const count = signal(0);
effect(() => console.log('count is', count()));
count.set(1);
console.log('after set');

Acount is 0, after set, count is 1 — the effect's first run happens synchronously at creation, but a re-run after .set() is scheduled asynchronously, not executed inline

Bafter set, count is 0, count is 1

Ccount is 0, count is 1, after set — effects run synchronously the instant a dependency changes

DOnly count is 1 logs — the first run is skipped

Why is the touched check there?

javascript

form = this.fb.group({
  email: ['', Validators.required],
});

AIt has no effect — invalid alone would show the same thing

Btouched is required syntax for every Reactive Forms validation message

Ctouched disables the input while false

DWithout it, the error would show immediately on page load, before the user has had a chance to type anything — touched becomes true only after the control has been focused and blurred at least once

Answer all 10 questions (7 more), see explanations for every answer, and track your score.