React best practices

Hi all -

I’ve got an application that is social-media-like. I have a route that runs a query. In the component, I map over the results and render the data. In each iteration, I call a component that also runs a query (gets information about the user viewing the page to get avatar, username, etc). I’m running into an issue where because the child query is the last to complete, React is scrolling to the component on the page instead of being at the top of the browser window.

So… that got me thinking about best practices. Is having queries inside of child components bad form? Or is there a way to have child queries, but prevent this behavior?

Let me know.

-Tom

Hi @tlester - there isn’t really a perfect / best practice answer here. Having queries inside child components is totally acceptable, depending on the use case (we’d have to see code to be sure). That being said though, this sounds more like a scroll restoration issue. Are you using React Router? If so have you considered leveraging one of their scroll restoration techniques?

Thanks for your reply. Yeah… the react-router thing was my first guess… but it still scrolled to the last piece rendered. This ONLY happens on a browser refresh, not a “refetch” or anything programatic in the application. Or on a very first load. Once this query is cached (which is the active user query) it never does it…

I could leave it… but I don’t like having those kind of things lingering as bad UX.

I’m goign to try to refactor my code today and do the query at a page/route level with all the bits it needs for that particular page and go from there.

I figured it out! It has nothing to do with what component was last rendered. Although it looked that way, ti was just a coincidence. That particular component also rendered the SlateJS rich text editor (fork of DraftJS) and it attempts to acquire focus. So, I fixed it by not rendering the editor until the div that it’s in is clicked on. Problem solved!

1 Like

Solved.