EuiFieldSearch unnecessarily unmounting/mounting

[legrego]

It appears that the EuiFieldSearch component is unnecessarily unmounting and remounting itself at times. I observed this when trying to listen to focus/blur events on the search component via its ref, but I noticed that I was adding/removing those listeners on every keypress within the input field.

Listeners aside, this is the smallest test case I could come up with. The incremental prop is not required, but it gets the point across faster.

Expected Behavior

The handleInputRef callback should be called once when the component is first mounted, and once when it is unmounted.

Actual Behavior

The handleInputRef callback is invoked once when the component is first mounted, again after every call to this.setState(), and once when it is unmounted.

/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License;
 * you may not use this file except in compliance with the Elastic License.
 */

import React, { Component } from 'react';
import {
  EuiFieldSearch
} from '@elastic/eui';

export class FieldSearchInputTest extends Component {
  state = {
    searchTerm: ''
  };

  render() {
    return (
      <div>
        <EuiFieldSearch
          inputRef={this.handleInputRef}
          onSearch={this.onSearch}
          incremental={true}
        />
        {this.state.searchTerm}
      </div>
    );
  }

  handleInputRef = (ref) => {
    if (!ref) {
      console.log(`inputRef called without ref`);
    } else {
      console.log('inputRef called with ref', ref);
    }
  }

  onSearch = (searchTerm) => {
    this.setState({
      searchTerm
    });
  }
}

[chandlerprall]

Good catch, and thank you for the simple reproduction for testing! Perfect.

Thankfully, in this case React isn't un- and re-mounting any of the components, so any superfluous CPU time is spent removing/adding your event listeners (and anything else you're doing on ref creation).

What is going on? EuiFieldSearch creates a new ref function on every render, and React will mark the ref function for update if the previous ref does not strict-equals the current ref. This behaviour creates unexpected calls to the ref - as you've noticed - so I'll update the component to not create ref every render.

[legrego]

Excellent, thanks for tracking that down and clarifying that for me. I appreciate your fast response!

…

On May 25, 2018, at 6:10 PM, Chandler ***@***.***> wrote: Good catch, and thank you for the simple reproduction for testing! Perfect. Thankfully, in this case React isn't un- and re-mounting any of the components, so any superfluous CPU time is spent removing/adding your event listeners (and anything else you're doing on ref creation). What is going on? EuiFieldSearch creates a new ref function on every render, and React will mark the ref function for update if the previous ref does not strict-equals the current ref. This behaviour creates unexpected calls to the ref - as you've noticed - so I'll update the component to not create ref every render. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.