segmentio / evergreen

🌲 Evergreen React UI Framework by Segment
https://evergreen.segment.com
MIT License
12.39k stars 832 forks source link

Autocomplete 'children' function continuously invoked #1329

Closed g00glen00b closed 2 years ago

g00glen00b commented 3 years ago

Let's say we use the basic example from the documentation, and add a console.log() statement, eg.:

<Autocomplete
  title="Fruits"
  onChange={changedItem => console.log(changedItem)}
  items={['Apple', 'Apricot', 'Banana', 'Cherry', 'Cucumber']}
>
  {props => {
   console.log('test'); // Add this
    const { getInputProps, getRef, inputValue } = props
    return (
      <TextInput
        placeholder="Fruits"
        value={inputValue}
        ref={getRef}
        {...getInputProps()}
      />
    )
  }}
</Autocomplete>

If you open up a browser, nothing spectacular will happen, even focusing/unfocusing the field won't make a difference. However, when you change the input value, the children function is continuously being called (as seen by the console.log() being called the whole time). This causes high CPU usage.

Is this intended behaviour?

zkuzmic commented 3 years ago

Good catch, that definitely shouldn't be happening. We should be able to address this sometime soon. In the meantime, feel free to open a PR.