Warning from the Babylon React tutorial: React Hook useEffect has missing dependencies

This warning is for the BabylonJS and ReactJs tutorial in the documentation, not for react-babylonjs.

This integration of babylon.js into a react application works fine, however there is a nagging warning:

React Hook useEffect has missing dependencies: ‘adaptToDeviceRatio’, ‘antialias’, ‘engineOptions’, ‘onRender’, ‘props’, and ‘sceneOptions’. Either include them or remove the dependency array. However, ‘props’ will change when any prop changes, so the preferred fix is to destructure the ‘props’ object outside of the useEffect call and refer to those specific props inside useEffect

I’m not sure if the dependencies should be added to the dependencies array, because the SceneComponent may not meant to be updated if these dependencies change.

Is there a quick fix for this warning?

Ian

Adding @brianzinn

The quick fix is to add a hint for the linter to ignore, which effectively indicates that your missing dependencies are intentional. When those “missing” dependencies change the useEffect won’t trigger again and React is warning you in case that is unintentional. Those are constructor parameters mainly and we don’t want to re-run when those props change. ie: if you change adaptToDeviceRatio prop you don’t want to dispose engine and create a new one.

The underlying reason is to make the example readable. The fix to remove the warning has many solutions - here are 2:

  1. Introduce a state like const [inititalized, setInitialized] = useState(false); (or useRef) and then you could ensure useEffect creates Engine only once with a gated check.
  2. useCallback could memoize the scene and engine creation. If you combined that with a useRef on Scene/Engine then you could actually flow those props through to instances. That would be useful if you wanted to change Engine properties via props.

At that point the “simple” example code would probably double in size. There was a forum post yesterday as well that brought to attention that the example may be better off with best practices as opposed to a simple as possible ~50 line example.

1 Like

Thanks Brian for your infomative reply.

Adding // eslint-disable-next-line before the dependencies array removes the warning.