React: How to traverse the React tree?

[gregberge]

I would like to propose to add a walkTree method in React. Today a lot of libraries relies on walking the React tree for SSR. It is used to preload data, styles or whatever.

I am asking because I found a bug in Loadable Components and I fixed it, but the bug is also in React Apollo and probably in other libraries that use this strategy.

I have several questions:

• Is walkTree the good strategy? If not can you tell me how to do it?
• If walkTree is the good strategy, could you maintain it and expose it in React or another package?

[gaearon]

I think Suspense-capable server renderer is the proper solution to this. Then you wouldn’t need to walk the tree for data fetching.

If there is some other use case can you please describe it in detail? It’s a bit hard to understand PRs to other libraries without knowing all the context on what exactly they’re trying to do and why.

[gregberge]

OK, let's take Apollo, you have a lot of graphql hoc in your application, server-side you have to know all data needed before starting the rendering. How to procede?

The difficulty is that you can have several levels, a Component1 that needs data to display Component2 that needs data to display a Component3.

So the actual solution is to walk through the React tree in order to get promises and resolve them. Using this strategy you can render the application with all prefetched data and transfer the state client-side.

[gregberge]

Also what is a "Suspense-capable server renderer"?

[gaearon]

you have to know all data needed before starting the rendering. How to procede?

You don’t if server renderer could “suspend” rendering waiting for data.

Have you seen my talk? This will be hard to discuss if you’re not familiar with Suspense.

https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html

Suspense lets components “wait” for data between rendering. My demo is about the client but we have plans to implement it for the server too. Then there’s no need to traverse a tree because rendering happens in a single pass.

[gregberge]

OK I understand, so this will be solved by Suspense. But is it compatible with renderToNodeStream? I mean if I try to implement suspense in Loadable Components, will it work server-side out of the box?

[necolas]

What would be the recommendation for a strategy that relies on server-side prefetching of data for rendering the initial client view, without doing any rendering on the server?

[gaearon]

But is it compatible with renderToNodeStream?

It would need to be a whole new server renderer with a different API.

What would be the recommendation for a strategy that relies on server-side prefetching of data for rendering the initial client view

You could still do the rendering to gather all the data but discard the result. Then send the cache down in a serialized form I think? If you don't want to render you could have your own system (e.g. like Redux users do) which is something you can already do today. But that doesn't involve walking the tree either.

[gaearon]

Similarly, the React Loadable use case you're referring to is supported out of the box by Suspense (my talk includes a demo of code splitting with no libraries).

[gregberge]

The complexity of Code Splitting is server-side, not client-side but if you provide an API to support Suspense server-side the problem is solved! For now I still have to walk the React tree as Apollo. I think I will create a package to do that in order to share this hard piece of code with other projects. I hope it will be deprecated soon!

[gaearon]

Makes sense. :-)

[gregberge]

Thanks for your answers :)

[dekryptic]

When do you think React with Suspense and these capabilities will be released to npm?

[lcswillems]

With Suspense and async rendering there will be no need to walk the tree, but the announcement was 1.5 years ago and they are still not released so we need to find a workaround for the moment. Have something like walkTree would be really great!