FormControl.detectchanges - why use distinctUntilChanged?

Question

Reading How to use RxJs distinctUntilChanged? and this, it seems that distinctUntilChanged alters the output stream to only provide distinct contiguous values.

I take that to mean that if the same value arrives in immediate succession, you are essentially filtering the stream and only getting one occurrence of that repeated value.

So if I write this:

this.myFormControl.valueChanges
  .debounceTime(1000)
  .distinctUntilChanged()
  .subscribe(newValue => {
    console.log('debounced: ', newValue);
  });

I see no difference in output to this:

this.myFormControl.valueChanges
  .debounceTime(1000)
  .subscribe(newValue => {
    console.log('debounced: ', newValue);
  });

I've seen a few places recommend using distinctUntilChanged when subscribing to valueChanges on form inputs — but don't really get why.

It's an input, so if the user is typing it is always changing, right? The values will always be distinct, so you're just adding an extra operation to filter input for no reason.

Or am I missing something here?

EDIT

Using distinctUntilChanged as per my first code sample, I created a form input with the value Mr Trump and ensured it was saved in the model.

I then clicked inside the control and pasted Mr Trump. Since the value is the same, I would have expected to not see anything logged — the control has the same value it had before, so surely the distinctUntilChanged should have ignored it?

EDIT 2

After further looking into my test, this behaviour appears to be because I used an array of AbstractControls:

this.itemsControl = <FormArray>this.form.controls['items']; 
...
this.itemsControl.controls[index].valueChanges...

So although a bit strange that it still fires when the value of the input is the same, I am guessing I need to hookup to valueChanges of the actual input inside this array item (a form group), and not the array item itself.

EDIT 3

So after changing the code in EDIT 2 to the following, pasting the same value that already exists into input control does not fire valueChanges (as expected). In EDIT 2 valueChanges was hooked to the entire formGroup, not the individual input control (in this case called content):

let fg = this.itemsControl.controls[index]; // get the formGroup
fg['controls'].content.valueChanges
  .debounceTime(1000)
  .distinctUntilChanged()
  .subscribe(newValue => {...});

Answer 1

Using debounceTime(1000) means we only send a request when the user stopped typing for 1 second, during that second the user can write 3 characters then erase them, so the input value didn't change since last request but you are sending the same request, to avoid that you can use .distinctUntilChanged()

  this.myFormControl.valueChanges
      .debounceTime(1000)
      .distinctUntilChanged()
      .subscribe(newValue => {
        console.log('debounced: ', newValue)
      });