React has some really great tools to enhance your developer experience. We'll go over a few of them here.
NODE_ENV=development
React already has a lot of developer conveniences built into it out of the box. What's better is that they automatically strip it out when you compile your code for production.
So how do you get the debugging conveniences then? Well, if you're using Vite.js, it will compile your development server with an environment variable of NODE_ENV=development and then when you run vite build it will automatically change that to NODE_ENV=production which is how all the extra weight gets stripped out.
Why is it important that we strip the debug stuff out? The dev bundle of React is quite a bit bigger and quite a bit slower than the production build. Make sure you're compiling with the correct environmental variables or your users will suffer.
Strict Mode
React has a new strict mode. If you wrap your app in <StrictMode></StrictMode> it will give you additional warnings about things you shouldn't be doing. I'm not teaching you anything that would strip warnings from StrictMode but it's good to keep your team in line and not using legacy features or things that will be soon be deprecated.
Be aware that StrictMode continually double-renders your components and will run effects twice. It does this catch subtle bugs where your app will change between renders when it's not meant to. It can be helpful, but to be honest, once you learn to write React the correct way you'll nearly never hit that sort of bug.
Dev Tools
React has wonderful dev tools that the core team maintains. They're available for both Chromium-based browsers and Firefox. They let you do several things like explore your React app like a DOM tree, modify state and props on the fly to test things out, tease out performance problems, and programmatically manipulate components. Definitely worth downloading now. See here for links.
Practice Exercise
Use React DevTools to inspect your app and experiment with the component tree.
- Open your React app in the browser and launch React DevTools.
- Select one of your components from the tree and inspect its props and state.
- Try changing a value in DevTools to see how it affects the rendered UI.
- Notice how the component tree helps you understand which parts of your app are rendering.