Introduction 00:00

We’ve been using React and React Three Fiber, but we haven’t really discussed monitoring and debugging.

This concerns both React and React Three Fiber and it’s important to make our developer life as easy as possible so that we can focus on the application and not on debugging or on understanding why the frame rate suddenly drops.

We are going to talk about React debugging first, then focus on React Three Fiber debugging and monitoring.

Setup 00:33

The starter is very similar to the previous starter with a sphere, a cube and a green floor.

The @react-three/drei dependency is already installed within the project and we are using the OrbitControls helper to be able to move the camera around.

StrictMode 00:59

There is one important React feature that we haven’t used yet for the sake of simplification, but that you should add to all your React projects and it’s the StrictMode.

The StrictMode will warn you about potential problems in your application.

Here are some examples:

• Unused import
• Infinite render loop
• Forgotten useEffect dependencies
• Deprecated practices
• Etc.

Adding it to your application is as simple as adding a tag around it.

In /src/index.jsx, import StrictMode from react:

import { StrictMode } from 'react'

Wrap the <Canvas> in a <StrictMode>:

root.render(
    <StrictMode>
        <Canvas
            camera={ {
                fov: 45,
                near: 0.1,
                far: 50,
                position: [ - 4, 3, 6 ]
            } }
        >
            <Experience />
        </Canvas>
    </StrictMode>
)

And that’s all.

Potential errors will now be shown as a warning in the terminal and in the console.

In the following lessons, we should not encounter specific errors, which is why we are not going to use it, but you should retain the StrictMode when you start adventuring on your own.

Don’t worry about the impact of the StrictMode in production. It’ll be ignored once the application is built.

Browser extension 03:54

We can install an extension named React Developer Tools that will help us check and modify our components live.