relay-tools/react-router-relay

Routes with data dependency re-render <App /> several times

adjourn opened this issue · 2 comments

Is it normal that if you navigate to route traditionally (via link or just a F5 refresh), <App /> component (and some group of children) render only once but if you enter the route via app, it renders 3-5 times?

This only happens to routes that has Relay data dependency and when there's no data in cache (1. visit).

It breaks several features that assume that app's main component renders only once if you enter a route.


I didn't find anything online, so I assume this is not related to Relay itself. There's no setState or forceUpdate called and it only happens to routes with Relay, so I assume that it's not related to React or React Router too.

I couldn't find any connections between route, component, query complexity and render count. Even the most simplest route with simplest component and query triggers several renders.

What could be the problem? It's probably either me or this package.

Small example from my routes:

<Router 
    history={browserHistory} 
    render={applyRouterMiddleware(useRelay.default ? useRelay.default : useRelay, useScroll())}     
    environment={Relay.Store}
>
    <Route 
        path="/" 
        component={App} 
        queries={ViewerQueries}
    >

        <IndexRoute component={Home} />

        <Route path="/posts" component={PostRoot}>
            <Route
                path="/posts/:category"
                component={PostList}
                queries={ViewerQueries}
            />

            <Route
                path="/posts/post/:nodeId"
                component={Post}
                queries={NodeQueries}
            />
        </Route>

        <Route
            path="/user/:nodeId"
            component={User}
            queries={NodeQueries}
        />

        <Route path="*" component={NotFound} />

    </Route>
</Router>


const ViewerQueries = {
    viewer: () => Relay.QL`query { viewer }`,
}

const NodeQueries = {
    node: () => Relay.QL`query { node(id: $nodeId) }`
}

Not sure if related but why-did-you-update logs a lot of avoidable re-renders for <StaticContainer /> and its children, for example:

  • StaticContainer.props
  • StaticContainer.props.children.props.children.props.routerProps
  • StaticContainer.props.children.props.viewer.__fragments__.0::client
taion commented

Please do your own investigation. There's nothing in this library that does anything to cause rendering. You've already opened a number of unhelpful issues in the past. Keep in mind that this is an issue tracker, not a support forum. If you need help, please use Stack Overflow.