00:00/00:00
3:22
00:03:22

Shortcuts ⌨️

  • SPACE to play / pause
  • ARROW RIGHT or L to go forward
  • ARROW LEFT or J to go backward
  • ARROW UP to increase volume
  • ARROW DOWN to decrease volume
  • F to toggle fullscreen
  • M to toggle mute
  • 0 to 9 to go to the corresponding part of the video
  • SHIFT + , to decrease playback speed
  • SHIFT + . or ; to increase playback speed

⚠️ Update

Use version 0.9.34 of leva:

npm install leva@0.9.34

⚠️ Update

Use version 7.2 of r3f-perf:

npm install r3f-perf@7.2

Unlock content 🔓

To get access to 93 hours of video, a members-only Discord server, subtitles, lesson resources, future updates and much more join us for only $95!

Want to learn more? 🖖

84%

That's the end of the free part 😔

To get access to 93 hours of video, a members-only Discord server and future updates, join us for only $95!

Next lesson
57.

Debug

Difficulty Medium

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.

Want to learn more?

That's the end of the free part 😔

To get access to 93 hours of video, a members-only Discord server and future updates, join us for only $95!

How to use it 🤔

  • Download the Starter pack or Final project
  • Unzip it
  • Open your terminal and go to the unzip folder
  • Run npm install to install dependencies
    (if your terminal warns you about vulnerabilities, ignore it)
  • Run npm run dev to launch the local server
    (project should open on your default browser automatically)
  • Start coding
  • The JS is located in src/script.js
  • The HTML is located in src/index.html
  • The CSS is located in src/style.css

If you get stuck and need help, join the members-only Discord server:

Discord