pmndrs / react-three-next

React Three Fiber, Threejs, Nextjs starter
https://react-three-next.vercel.app/
MIT License
2.52k stars 342 forks source link

Does the canvas unmount on route changes? #107

Closed clearly-outsane closed 1 year ago

clearly-outsane commented 2 years ago

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?

RenaudRohlinger commented 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 😆)