question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unnecessary re-renders triggered whenever click event gets fired

See original GitHub issue

While i was investigating some performance issues within my projects I noticed that your component re-render on every click. So I used React profiler and it turns out the suggestions state variable keep changing for each click (even outside of the component). I looked into the source and found this: https://github.com/Tintef/react-google-places-autocomplete/blob/db8e6b4d7f2a4eac1dd7d85d6bb0914e8f68eb2c/src/GooglePlacesAutocomplete/index.js#L55 which apparently used to clear the suggestions when the component lose focus https://github.com/Tintef/react-google-places-autocomplete/blob/db8e6b4d7f2a4eac1dd7d85d6bb0914e8f68eb2c/src/GooglePlacesAutocomplete/index.js#L90-L96

I think there is another ways to do it than adding event listener on the document level

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
Tintefcommented, Aug 28, 2020

@bahaa-kallas This is already merged in master (but still an alpha release), please let me know if this is still an issue on v3.0.0-alpha.1

1reaction
Tintefcommented, Aug 24, 2020

@bahaa-kallas FYI, this is already released as an alpha version, you can install it with:

yarn add react-google-places-autocomplete@3.0.0-alpha.1

And you can find the new docs here

Read more comments on GitHub >

github_iconTop Results From Across the Web

How I eliminate ALL unnecessary Rerenders in React - Medium
The two most common causes of unnecessary unmounting are: Not using event. preventDefault()
Read more >
Why is my onClick being called on render? - React.js
This will attach a function to the onClick event which will get triggered on user click action only. When this code exectues the...
Read more >
A Story of a React Re-Rendering Bug - Engineering Blog
When they clicked on a button on the page, they saw nothing ... It will output “clicked” to console, when the click event...
Read more >
Add a way to avoid component re-rendering caused by events ...
When a user clicks on a certain table cell, up to 3 events may get triggered. Depending on what the consumer of the...
Read more >
Optimizing React performance by preventing unnecessary re ...
When a component re-renders, React will also re-render child components by default. Here's a simple app with two Counter components and a button ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found