fix for Maximum update depth exceeded Feature Request

[pratteekshaurya1994]

I was getting error "Maximum update depth exceeded".

So I checked you file GooglePlacesAutocomplete.js

In that I noticed in you useEffect:

useEffect(() => { // This will load the default value's search results after the view has // been rendered _handleChangeText(stateText); return () => { _abortRequests(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [props.query]);

I think your props.query in your dependency array is causing onChangeText of textInputProps to continuously run making _handleChangeText change state continuously , I removed props.query and had an empty dependency array. then there was no issue. Also if you give stateText then also no issue comes.

please check it, and update it accordingly

[nguyendinhdoan]

I'm having the same issue. The onChangeText is called infinitively

[nguyendinhdoan]

I've fixed this. So instead of using:

<GooglePlacesAutocomplete
  query={{
    key: 'YOUR API KEY',
    language: 'en'
  }}
/>

I change to:

const query = useRef({
  key: 'YOUR API KEY',
  language: 'en'
}).current;

<GooglePlacesAutocomplete
  query={query}
/>

[yonitou]

@nguyendinhdoan Life savior ! It fixes the issue :) What I did personally is that I totally removed the query variable from the component :

const query = {
  key: 'YOUR API KEY',
  language: 'en'
};

const MyComponent = (): JSX.Element => {
 return <GooglePlacesAutocomplete query={query} ... />;
}

[parnekov]

I've fixed this. So instead of using:

<GooglePlacesAutocomplete
  query={{
    key: 'YOUR API KEY',
    language: 'en'
  }}
/>

I change to:

const query = useRef({
  key: 'YOUR API KEY',
  language: 'en'
}).current;

<GooglePlacesAutocomplete
  query={query}
/>

@nguyendinhdoan Thanks! It works!

[successful-fella]

@nguyendinhdoan Thank you so much ~

For those of you unlucky ones like me maintaining an ancient codebase, and after a routine SDK update, your client informs you next day that the app is crashing (what else is new?), you spend hours through thousands of lines of spaghetti code, only to discover—surprise!—it's GooglePlacesAutocomplete causing the havoc. Here is what you do for class component -

query = {
    key: '',
    language: 'en'
}

render() {
    return (
        ...
        <GooglePlacesAutocomplete
            ...
            query={this.query} 
        />
        ...
    )
}