react-babylonjs with react strict mode; the two rendering passes in dev build

[sevaseva]

Hi @brianzinn,

I hope you are doing well.

Would you mind summarizing current status of react-babylonjs in regards to double rendering (and mounting components twice) in dev build when Engine and/or Scene (and/or components within a scene) are rendered in strict mode?

e.g.

• are there known issues that reproduce when the double rendering is on but not when it's off? (memory leaks, race conditions, downloading resources twice, etc)
• have you discovered/fixed such issues in the past? how many undiscovered issues of this sort - if you were to estimate realistically - may exist in the codebase today? what kinds of issues are more likely to exist than others?
• do you even recommend to bother rendering react-babylonjs components in strict mode today, with react 18? In other words, do you believe the benefits the strict mode brings outweigh the costs of enabling it when react-babylonjs components are concerned?
• do you expect the react-babylonjs components to withstand the future when remounting and rerendering of parts of the component tree will also be a thing in production react builds (quoting the announcement from react blog from a year ago):

In the future, we’d like to add a feature that allows React to add and remove sections of the UI while preserving state. For example, when a user tabs away from a screen and back, React should be able to immediately show the previous screen. To do this, React would unmount and remount trees using the same component state as before.

• While I know that you don't advocate for imperative use of this library (with executing much logic as part of the Scene.onSceneMount callback as opposed to heavy use of the declarative components nested within the Scene), can you share some recommendations to the users who do that for various reasons, with regards to the strict mode double rendering in dev builds?

[brianzinn]

sorry for late reply.

i think the general guidance from React team is to use Strict mode to help detect issues with hooks. I haven't had any issues with the double rendering, but generating too many webgl contexts can cause issues without or without the double rendering. It should be more or less transparent in terms of the DX. There are debouncing or memoizing techniques to avoid the double render, but I have decided to leave everything as-is, but certainly happy to revisit.

Also, I am not opposed to imperative coding and a heavy use of onSceneMount, but if that was entirely so then babylonjs-hook is a better library for that use case.

Additionally, you may get some mileage out of "partial" Strict Mode. it doesn't need to be at the root of your app.

const MyApp = () =>
  <>
    <StrictMode>
      <YourDomAppHere />
    </StrictMode>
    <BabylonjsAppHere />
  </>
}

You'd probably have some state management or something above that in the hierarchy.

I remember when I first came across StrictMode in an early beta and was just plain confused. I had API calls going out twice! I can appreciate it's something that would be nice to turn off. For people with a more declarative style it can help detect code issues, so certainly wouldn't want to switch it off for everybody... Do you have any suggestions?