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.

Parent re-rendering causes AsyncTypeahead to think request is done too early

See original GitHub issue



Steps to reproduce

I have a that contains an AsyncTypeahead. As part of the onSearch handler, it calls setState. This ends up triggering a re-rendering of Parent, which falls through to componentWillReceiveProps in src/containers/asyncContainer.js. In that function requestPending gets set to false prematurely.

class Parent extends React.Component {
  constructor() {

    this.handleSearch = this.handleSearch.bind(this)
    this.state = { options: [] }

  handleSearch() {
    const resultWillBe = [ 'bears', 'beets', 'battlestar galactica'];

    // If this is present, it triggers the bug
    this.setState({ arbitrary: 'setting' })

    setTimeout(() => this.setState({ options: resultWillBe }), 2000)

  render() {
      return <AsyncTypeahead
          minLength={ 1 }
          onSearch={ this.handleSearch }
          options={ this.state.options }

Expected Behavior

The AsyncTypeahead component should pop the “searching” element, replacing it with the list of results when they come back. This happens if useCache is true. If useCache is false, the list will show up correctly, but the little pop up that would have the results visibly flashes through various other things first.

Actual Behavior

“Type to search” gets popped and gets replaced with “No matches found”. The list of results never shows up.

First guess at a fix would be that if we can assume that the onSearch passed to the AsyncTypeahead component returns a Promise, then the call to set requestPending state to false could happen in a then call on that Promise. I don’t know if that will blow other things up though.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:7
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

ericgiocommented, Oct 27, 2017

I think the only real solution here is to track the request state externally and pass it into the async component as a prop. I thought I could have the component guess at the state, but it’s clearly buggy and really should be explicit.

The overhead would be minimal: just a setState call before the request is made, and another one when the results come back. That state would be passed to the isLoading prop of the component.

Note that this isn’t a workaround; it will require changes to the component.

ericgiocommented, Apr 27, 2017

Thanks for the detailed report. I can repro. Will look into a fix.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React: Parent component re-renders all children, even those ...
I've tried setting and updating the current message state directly within the InputBar component (so completely ignoring the Redux architecture) ...
Read more >
How to stop re-rendering lists in React? - Alex Sidorenko
Components always re-render. First, let's simplify our example by removing all props from the Item . We will still update the parent state...
Read more >
github react hook form
The most advantage of use React Hook Form is to get all the benefits of work with uncontrolled components in forms like skip...
Read more >
Is it possible to update/re-render the child component without ...
I believe in this situation the parent will rerender, but the only child components that will rerender are ones for which input props...
Read more >
Number of objects vs Payload, while scaling a modern ...
DOM manipulation leads to reflows and repaints both of which are very slow and computationally intensive. Every call to render might cause a...
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 Post

No results found

github_iconTop Related Hashnode Post

No results found