-
React Router v6 Code Posted
Chapter 12 covers how to do Routing in React using React Router v5. In the time since the book came out, React Router v6 has been released, which includes some changes to how it’s used. I’m also working on writing a version of Chapter 12 that covers React Router 6. I’ll post that to the […]
-
Errata: Chapter 6
The final code example in the Shallow Copies and the Spread Operator section on page 160 shows a rest parameter with only two periods. There should be three. The correct code is:
-
React 18 Update
The biggest change in React 18 is the addition of concurrent rendering. With concurrent rendering, you can mark state updates as non-urgent in order to improve the performance of your user interface. Concurrent rendering is opt-in. What this means is that it’s only enabled when you use a concurrent feature. As a result, apps built […]
-
Errata: Listing 4-12
In listings 4-12 and 4-13, the button’s onClick calls this.incrementCount and passed count+1 to it. There’s no need to pass a value here, since the incrementCount function increments the count variable. The corrected / improved code for listing 4-12 should be:
-
React 18 is Here!
The latest version of React has been a long time coming. This new version has some great behind-the-scenes updates to how React rendering works, makes changes to server-side rendering of React, and introduces the new Suspense feature, which lets you specify a loading state for components that aren’t ready to be displayed yet (such as ones that rely on the results of an asynchronous request).
-
Writing an Error Boundary
Errors can happen in React components for many reasons. In development mode, errors will cause React to spit up a bunch of red text into the browser. This is sometimes helpful for debugging the problem.
In production mode, React will display a white screen (called the “white screen of death”) rather than report to the user what caused the error. This makes a lot of sense, but it will likely result in the user getting confused and/or leaving your app.
Error boundaries are a way to catch errors in React components before the white screen of death appears and to display something more friendly. You can even use an error boundary to provide a “try again” button and to log the error to a remote logging service.
-
Prop Drilling
Prop drilling is a normal pattern and best practice in React. There are times, however, when ‘global’ data, such as user preferences or theming information must be passed to many different component and through multiple layers.
-
Conditional Rendering with Element Variables
The benefit of using this method for conditional rendering is that it’s easy to read, and you can have as many branches as you need.
-
Conditional Rendering with &&
Using the && operator is a quick and easy way to conditionally render a component. Unlike using an if/else statement, a switch statement, or the ternary operator, using && doesn’t provide a way to choose between 2 or more components to render.
-
Errata
No matter how many times a book is checked and how many editors go over it, it’s inevitable that there will be typos or bugs. Some of these bugs will be due to changes that happened in React or any of its dependencies since the book was written, and some may even be things that […]