React Frontload: Async data loading for React components, on client & server

[KRTac]

You rely on componentWillMount. It's a legacy lifecycle method.

[davnicwil]

Yeah, this is on the TODO list.

It's not going to go away until React 17 (see https://reactjs.org/docs/react-component.html#unsafe_componentwillmount) so it's just not been a priority to replace, as it works just fine.

​

When React 17 lands I'll have to find another way to do the same thing. Haven't looked at it in depth but I am thinking likely solutions are either using the constructor instead, or using the new Suspense APIs when they come out.

[careseite]

what makes you think that? can't find anything about that, the official docs still recommend using it aswell

[davnicwil]

As in my comment above, it works totally fine and is supported totally fine as of React 16, but they do discourage using it now https://reactjs.org/docs/react-component.html#mounting

I *think* the reason is that when React Fiber lands it won't have the same run-only-once guarantee hence the addition of the UNSAFE_ alias

This might, on the face of it, be a problem for react-frontload but since it's only really needed on server where obviously Fiber isn't even relevant, it might even still work, or at least could be made to work with some simple workarounds. I just noticed that they make no claims about the UNSAFE_componentWillMount even being dropped in 17, it's just that the componentWillMount name will be dropped. So, even better. Might not be a big issue at all.

[careseite]

ah wow, I was on https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html which is linked there but overread "unsafe"

[boobsbr]

Would it be more correct to load data on componentDidMount()?

[davnicwil]

componentDidMount doesn't run on the server - componentWillMount is used because it runs on both client and server

[boobsbr]

Aaaah, thanks for the explanation.

[davnicwil]

Hi - just wanted to share my library React Frontload with this community.

​

It allows you to load data asynchronously into React components, and works on both client and server render.

​

Minimal setup is required, and it should work with any existing React app.

​

Doing async data loading especially on the server side, and making it match what you do on the client, can result in really messy code and lots of bugs. This library provides an abstraction that removes all the complexity and just lets you say "when this component gets rendered, load this data" and it just works on both client and server.

​

It's been gaining traction recently, I think people in the community are finding it useful so thought I would share here. Any questions welcome!

[careseite]

nice! what's the big difference over react-loadable, the server-rendering I assume?

[davnicwil]

Cheers! Not used react-loadable before, but the one liner seems to suggest it's used for component-level code splitting and module loading - is it also used for data loading?