Closed clearly-outsane closed 1 year ago
In React, the useEffect hook is used to run side effects in function components. The useEffect hook takes a function as its first argument, and an optional array of dependencies as its second argument.
The main difference between using useEffect without a dependency array and using an empty dependency array is that the former runs the effect on every update, while the latter only runs the effect once, when the component is mounted.
When you use useEffect without a dependency array, the effect will be run on every render of the component, including the first render and all subsequent updates. This is similar to the componentDidUpdate lifecycle method in class components. This can be useful if you need to perform some cleanup or other action on every update of the component.
For example, the following code will run the effect on every render of the component:
useEffect(() => {
console.log('Component updated');
});
When you use useEffect with an empty dependency array, the effect will only be run once, when the component is first mounted. This is similar to the componentDidMount lifecycle method in class components. This can be useful if you need to perform some setup or initialization when the component is first mounted.
For example, the following code will run the effect only once, when the component is mounted:
useEffect(() => {
console.log('Component mounted');
}, []);
In summary, the difference between using useEffect without a dependency array and using an empty dependency array is that the former runs the effect on every render of the component, while the latter only runs the effect once, when the component is first mounted.
(Yes I used chatGPT 😆)
When I add
useEffect(() => { console.log('re render') return () => { console.log('unmount') } })
to the Scene.jsx file. It console logs unmount whenever I change the route. So does that mean the canvas is unmounting on route changes after all?