React - Detect when hits have rendered

Hello, how can I detect that the hits have finished rendering? For the standard JS library I can simply register a callback like this:

search.on('render', function() {
  console.log("foobar");
});

But I am not aware how to do this in React. I am also very new to React, so I am not sure if I might just be missing a native option, but I have not been able to find one. - Thanks for any help.

Hi Jan1,

I don’t have enough information to give you a precise answer. Don’t hesitate to answer with more detailed of your current implementation.

If you want to know more about React and its lifecycle you can look [https://reactjs.org/docs/hooks-effect.html] (https://reactjs.org/docs/hooks-effect.html) (if you are using a version > 16.8). From what I understand of your question you should be able to detect when your component is rendered by using the useEffect hook.

Let me know if you have more questions.

1 Like

Hey, and first of: thank you. - This kinda worked in that it would allow me to know when each hit finished rendering. What I am trying to figure out is how I can listen to when the <Hits /> component finishes rendering. Basically my code looks like this:

render() {
return (
  <div>
    <div className="ais-InstantSearch">
      <InstantSearch 
        indexName="<index-name>" 
        searchClient={searchClient}
        searchState={this.state.searchState}
        onSearchStateChange={this.onSearchStateChange}
        createURL={createURL}
      >
        <div className="container">
          [...]
          <Hits hitComponent={Hit} />
        </div>
      </InstantSearch>
    </div>

    [...]
  <div/>
 
);

function Hit(props) {
 [...]
  return (
    <div>
      [...]
    </div>
  );
}

I hope this makes my question clearer.

When you say that it kinda work, do you mean using the hook? If yes, can you show me where in the code you have placed it?
Looking at your code it seems that you’re using a class in which you render Hits. Here you could use componentDidMount or transform it to a functional component and then it should be fine with Hook.

If this is still not helpful, can I ask you what is the purpose behind knowing when the Hits component is rendered? Or even better if you have a code sandbox to share it would be perfect!