00:00/00:00TIME LEFT
Choosing the a bcd
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

Want to learn more?

That's the end of the free part 😔

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

44.

Debug

Difficulty Medium

Downloads

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.js, 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 45 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
    (if your browser detects a menace, do not worry, it is not)
  • Unzip it
  • Open your terminal and go to the unzip folder
  • Run npm install command to install dependencies
  • Run npm run dev to launch the local server
    (your browser should start automatically)

You can now 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

Any trouble? Go to the discord server: