Detect WDYR running too late

I have an app that uses a lot of mainstream React libraries including react-router and react-redux. It's big so we also leverage React.lazy and React.Suspense.

I recently noticed dev errors from React around hook render ordering. You know the one, where React yells at you if you have a hook running conditionally. Well in my case, I was getting the errors, but I was confident that I wasn't running hooks conditionally.

After a lot of investigating, I found the issue to be a simple combination of why-did-you-render and React.lazy.

I don't propose to explain the reason for this issue, but I have come up with a simple-as-possible example to show it off.

https://github.com/jfairley/wdyr-lazy-bug

In this example, I have:

1. why-did-you-render
2. React.lazy
3. a delayed render of a lazy component
   • The real use case here is waiting for app state to initialize before unleashing the rest of the app.

If I take away any of these 3 parts of the puzzle, the app renders without errors.

Realistically, the app doesn't always blow up, so simply disabling why-did-you-render unless explicitly needed to debug a dev scenario was the solution for me. I understand that the issue is some confluence of timing between the lazy import / initialization of why-did-you-render, the lazy import of components (via React.lazy), and obviously the intentional delay of rendering downstream components, but as I said, my app is complicated, so these things are immovable objects unfortunately.

Anyway, please have a look and thanks!