About Me

I've been a web developer since 1997, and I've been programming in JavaScript since 1998. I've built or managed the building of web applications for some of the world's largest companies over the years. As a web developer, writer, and teacher, I've had to learn and use plenty of languages and JavaScript frameworks. There's a difference between learning something and applying it, and I've been working on projects with React and doing React consulting for several years now.

I've been teaching web development and JavaScript online and in person since 2000, and I've been teaching React since 2015. In the years that I've been teaching React, I've written three weeklong courses designed for in-person delivery, numerous short video courses, and two longer video courses. I've taught React on three continents, and my students have been web developers, Java and C programmers, COBOL programmers, database administrators, network administrators, project managers, graphic designers, and college students.

As I'm writing, the global COVID-19 pandemic has decimated the in-person training industry. While this situation has given me more time at home with the pets, it's also given me time to think deeply about React and about the React book that I wish existed today. This book is the result of my looking at all of the top React books, looking at the current state of how React is being used, and looking at what React is likely to look like in the future.

React Is Popular

React is a JavaScript library that was born out of Facebook's need to create scalable and fast user interfaces. Ever since Facebook released it to the world as an open source project, it has been one of the most widely used ways to build dynamic web and mobile applications.

One popular game among JavaScript developers is to think of a noun, add “.js”, and search GitHub to find the JavaScript framework with that name. In a time when new JavaScript frameworks and libraries pop up and die off with shocking regularity, React is one of three libraries released since 2010 that have stuck around and gained the kind of developer usage that will guarantee that they will be supported and in widespread use for a long time to come.

React Is Both Progressive and Conservative

React has been able to stick around so long and gain so many users because it's always been a forward-looking framework that's not afraid to make big changes to adapt to new features in JavaScript, new ways of writing user interfaces, and feedback from developers. Over the years, React has gone through several major changes in how the basic unit of a React application, the component, is written. But, amidst all this change, React has stuck to a central paradigm and each major change to React has maintained compatibility with previous versions.

Don't Believe Everything on the Internet

While the end result of all this change is that React has gotten easier to write and more robust over the years, it's also caused a pileup of outdated and often wrong example code and tutorials on the internet and in books. If you've done any research on React prior to buying this book, you've surely noticed this, and you've likely been confused by it. Perhaps you bought this book after having a frustrating experience with learning React online only to learn that you learned about an old version of it.

This book aims to be a solid and complete guide to all of the most important (and some less important) features, concepts, and syntaxes used in React.

Internet Connection and Computer

I assume that you have a connection to the internet and a reasonably modern desktop or laptop computer. Writing code on tablets or smartphones is possible, but it's not easy. My examples and screenshots will be from the perspective of a desktop and/or laptop computer, and I can't guarantee that my example code will all be usable on a smaller device. Furthermore, some of the tools that you'll be using to build React applications simply won't run on a smartphone or tablet.

Web Development Basics

As previously mentioned, an understanding of HTML, CSS, and JavaScript is essential before beginning your study of React. If your experience is mostly with copying and pasting code that others have written, but you feel comfortable with making changes and looking up things that you don't yet know, you'll do fine with this book.

Code Editor

You'll need a code editor. The one I currently use and recommend is Microsoft Visual Studio Code. It's available for free on MacOS, Linux, and Windows. If you're more comfortable using another code editor, that's fine too. I've used many different code editors over the years, and I believe that whichever code editor a developer chooses to use and can be most effective with is the right one.

Browser

You'll also need a modern web browser. Although Mozilla Firefox, Google Chrome, and Windows Edge will all work for our purposes, my screenshots throughout the book were taken in Google Chrome on MacOS. Feel free to use whichever of the three modern web browsers you prefer, but understand that your experience may differ slightly from the screenshots in the book and that some of the React developer tools are currently only available for Chrome and Firefox.

Introducing Visual Studio Code

In my more than 25 years as a web developer, I've used many different code editors, and I still switch code editors from time to time depending on the project or the type of code I'm writing.

However, there always seems to be a “popular” code editor that the majority of web developers use. Which editor is the popular one has changed several times over the years, but as of this writing, the code editor that seems to be most widely used for writing front-end web code is Microsoft's Visual Studio Code (aka VS Code), shown in Figure I-1.

Visual Studio Code is free and open source, and it's available for Windows, Linux, and MacOS. It features built-in support for React development and many plugins have been developed for it that can be helpful for writing and debugging React projects.

For these reasons, I'll be using the latest version of Visual Studio Code in this book, and my screenshots and step-by-step instructions may be specific to Visual Studio Code in some places. If you choose to use a different code editor, be aware that you'll need to translate a few specific instructions to your environment.

If you don't already have Visual Studio Code installed, follow these steps to get it:

1. Open code.visualstudio.com in your web browser and click the download link for your operating system (Figure I-2).

   

2. Double-click the downloaded file to start the installation process.
3. Accept the default options if you're presented with any options during installation.

Once you have Visual Studio Code, launch it. If this is the first time you've used it, you'll see the welcome screen, as shown in Figure I-3.

If you'd like to open the welcome screen at any point, you can do so by selecting Get Started from the Help menu.

The first and most important thing to learn about VS Code is how to use the Command Palette. The Command Palette gives you quick access to all of VS Code's commands. Follow these steps to become familiar with the Command Palette:

1. Open the Command Palette by selecting it from the View menu, or by pressing Command+Shift+P (on MacOS) or CTRL+Shift+P (on Windows). An input box will appear at the top of the VS Code interface, as shown in Figure I-4.

   

2. Type new file into the Command Palette input field. As you type, you'll see a list of available commands below your input.
3. When you see File: New Untitled File at the top of the Command Palette (as shown in Figure I-5), press Enter. A new untitled file will be created.

   

4. Open the Command Palette again and start typing save. When File: Save is highlighted, press Enter to save your file. Give it a name ending with .html (such as index.html).
5. Type ! on the first line of your new file and then press the Tab key. The scaffolding for a new HTML file will be written for you, which will look like Figure I-6. This magical code-generating feature is called Emmet. Emmet can be used to automate many routine tasks and speed the writing of code, and it would be a great idea to start getting familiar with it and practicing the use of it right away.
6. Use CTRL+s or the Command Palette to save your new file.

Node.js

Node.js started as a way to run JavaScript on web servers. The benefits of doing this are that, using Node.js (also known as just “Node”), programmers can use the same language on the client side (in the web browser) as they use on the web server (aka “server side”). Not only does this reduce the number of programming languages that a programmer or a team of programmers needs to be fluent in, but Node.js also makes communication between the server and web browsers easier because both are speaking the same language.

Figure I-7 shows a basic web application with Node.js running on the server and JavaScript running in a web browser.

As Node.js became popular, people also started to run it on their own computers as a way to run JavaScript programs outside of web browsers. Specifically, web developers used Node.js to run tools for automating many of the complex tasks involved in modern web development, as shown in Figure I-8.

Common tasks that take place in development and that can be aided by Node.js include:

• Minification: The process of removing spaces, line breaks, comments, and other code that's not required for the program to run, but that is helpful for people who work on the program. Minification makes scripts, web pages, and stylesheets more efficient and faster. Figure I-9 shows the difference between JavaScript code as it's written by a programmer and minified code.

  

• Transpiling: The process of converting programming code from one version of a programming language into another version. This is necessary in web development because not all web browsers support the same set of new JavaScript features, but they do all support some core subset of JavaScript features. By using a JavaScript transpiler, programmers can write code using the latest version of JavaScript and then the transpiled code can be run in any web browser. Figure I-10 shows an example use of JavaScript template strings, which were introduced in ES2015, along with their equivalent in an earlier version of JavaScript.

  

• Module bundling: A typical website can make use of hundreds of individual JavaScript programs. If a web browser had to download each of these different programs individually, it would significantly slow down web pages due to the overhead involved with requesting files from web servers. The main job of a module bundler is to combine (or “bundle”) the JavaScript and other code involved in a web application to make serving the application faster. Because a bundler has to do work to all of the files in a program, it also is a good central place for tasks like minification and transpiling to take place, through the use of plugins. Figure I-11 illustrates the process of module bundling.

  

• Package management: With so many different programs involved in JavaScript development, just installing, upgrading, and keeping track of them can be quite complex. A package manager is a program that helps you with tasks related to the management of all these programs (which are also known as “packages” in Node.js lingo).
• CSS preprocessor: A CSS preprocessor, such as SASS or LESS, allows you to write style sheets for your web application using a superset of CSS (such as SCSS) that supports the programmatic features that CSS lacks—things like variables, mathematic operations, functions, scope, and nesting. A CSS preprocessor produces standard CSS from code written using an alternative syntax.
• Testing frameworks: Testing is an essential part of any web project. Properly written tests can tell you whether each piece of your application is working as it was designed. The process of writing logic to test whether your application works as it should is also a powerful tool for helping you to write better code.
• Build automation: If you had to run each of the different tools involved in compiling a modern web app every time you wanted to test it out and deploy it to the web, you would have a very complex series of steps to follow and use to train anyone else who might work on the code. Build automation is the process of writing a program or script that runs all of the different tools for you in the right order to quickly and reliably optimize, compile, test, and deploy applications.

These are just a few of the different types of tools that are written in JavaScript and run in Node.js that front-end developers use on a regular basis. If you'd like to explore the vast universe of Node.js packages, visit the npm Package Repository at https://npmjs.com, or continue to the next section to learn about managing and installing Node.js packages.

Getting Started with Node.js

The most common way of interacting with Node.js is through commands typed into a UNIX-style terminal. You can access a terminal from within Visual Studio Code using three different methods:

1. By selecting New Terminal from the Terminal menu.
2. By right-clicking a folder in VS Code's file explorer and selecting Open in Integrated Terminal.
3. By using the keyboard shortcut CTRL+~.

Whichever way you choose (and I recommend getting comfortable with the keyboard shortcut to save yourself from having to switch to using your mouse), a window will open at the bottom of VS Code that looks like Figure I-12.

The first step in learning to use Node.js is to make sure that it's installed on your computer. If you have a computer running MacOS or Linux, chances are good that it's already installed, but you may need to upgrade to a newer version. On Windows, it may not be installed, but that's easy to fix. Follow these steps to check whether you have Node.js installed, see what version is installed, and upgrade to the latest version:

1. Open the Terminal in Visual Studio Code.
2. In the Terminal, type node -v. If Node.js is installed, it will return a version number. If the version number is lower than 14.0, you'll need to upgrade. Proceed to step 4. If your version of Node.js is greater than 14.0, you may still want to proceed to step 4 and upgrade to the latest version of Node.js, but it's not required.
3. If Node.js is not installed, you'll get a message that node is an unknown command. Proceed to step 4.
4. Go to https://nodejs.org in your web browser and click the link to download the current LTS version of Node.js.
5. When the Node.js installer finishes downloading, double-click it and follow the instructions to install it.
6. If you have a Terminal window open in Visual Studio Code, close it and then re-open it.
7. Type node -v into your Terminal. You should now see that you have the latest version of Node.js installed.

Node.js Package Management with yarn or npm

Now that you have Node.js installed, the next step is to learn to use a package manager to install and upgrade Node.js packages. When you installed Node.js, you also installed a package manager called npm. This is the package manager that we'll be using in this book, because it's the most commonly used one, and because you already have it. There are other package managers, however. One of them, which has become quite widely used, for a number of reasons that we don't have the space to go into here, is called yarn. The commands that you use for npm and yarn are actually quite similar. If you'd like to find out more about yarn, and why you might want to use it, you can do so by visiting www.yarnpkg.com.

If you have Node.js installed, you already have npm installed. You can verify this by following these steps:

1. Open the Terminal in Visual Studio Code.
2. Type npm -v at the command line. You should get a response similar to the one shown in Figure I-13.

If you have an older version of npm installed, it can cause some of the commands we'll run in this Introduction and the book's chapters to not work correctly. If you use MacOS, you can upgrade npm by entering the following command in the Terminal:

sudo npm install -g npm

After you type this command in the Terminal and press Enter, you'll be asked for a password. This is the password that you use to log in to your computer.

If you use Windows, you can upgrade npm by entering the following command:

npm install -g npm

Note that you must have administrative access to your computer to run this command.

The npm install command is how you can download and install Node.js packages to your computer so you can run them or so other programs can make use of them. When a computer program needs another computer program in order to run, we call the program it requires a dependency. Because Node.js programs are made up of small packages that often individually have reusable and limited functionality, it's not uncommon for a Node.js package to have hundreds of dependencies.

When you run npm install followed by the name of a Node.js package, npm looks for that package in the npm repository, downloads it (along with all of its dependencies), and installs it. Packages may be installed globally, which makes them available to any program on your computer, by specifying the -g flag after the npm install command. So, when we say npm install-g npm, what happens is that the npm package installs the latest version of itself. In other words, it upgrades.

In addition to being able to install packages globally, npm can also install packages locally, which makes them available only to the current project.

Follow these instructions to see the npm install command in action:

1. Open Visual Studio Code and click the File Explorer icon on the left toolbar.
2. Click Open Folder and use the file browser that it opens to create a new folder named chapter-0 in your computer's Documents folder and open that folder.
3. Open the integrated Terminal application in Visual Studio Code. It will open a command-line interface and set the current directory to the folder that you have open.
4. Type npm init -y. Running npm init creates a new file called package.json, whose purpose is to track dependencies and other meta information about your node package.
5. Type npm install learnyounode -g, or sudo npm install learnyounode -g (on MacOS or Linux). This will install an npm package created by NodeSchool ( nodeschool.io) that teaches you how to use Node.js. As the learnyounode package is downloaded and installed, you'll see some messages fly by on the screen (and possibly a few warnings or errors—these are normal and nothing to worry about).
6. When the package has finishing installing, type learnyounode in the Terminal to run it. Your command prompt will be replaced by a menu of lessons. I recommend going through at least the first one or two of these lessons at your convenience so that you can get a better idea of what Node.js is, although a deep understanding isn't necessary for learning React.

Chrome DevTools

Google's Chrome browser includes a powerful set of tools for inspecting and debugging websites and web applications. Follow these steps to get started with using Chrome DevTools:

1. Open your Chrome browser and go to www.example.com. You'll see a simple example web page. The simplicity of this page makes it a great place to start to learn about Chrome DevTools.
2. Open the Chrome DevTools panel by clicking the three dots in the upper-right corner of Chrome (this is known as the Chrome Menu) and selecting More Tools ➢ Developer Tools or by using the keyboard shortcut: Command+Option+I (on MacOS) or CTRL+Shift+I (on Windows). The keyboard shortcut is not only easier, it is also unlikely to ever change, whereas the location of the Developer Tools menu item has changed several times over the years. Either way you open it, a panel will open up in your browser, containing the DevTools, as shown in Figure I-14.

   

3. Look for the element selector tool in the upper-left corner of the DevTools panel and click it. You can use the element selector tool to inspect the different HTML elements in a web page.
4. Use the element selector tool to highlight different parts of the www.example.com web page. When you have the header of the page highlighted, click it. The HTML that creates the header will be highlighted in the source code view in DevTools, and the CSS styles that are applied to the header will be shown to the right of the source code.
5. Double-click the words Example Domain inside the <h1> element in the source code view. The words will become highlighted and editable.
6. With the words Example Domain highlighted in the source code view, type new words over them to replace them and then press Enter to exit the source editing mode. Your new text will appear in the browser window as the <h1> element.
7. Find the <h1> element style in the styles pane to the right of the source code window and double-click it.
8. Try changing the styles that are applied to the <h1> element and notice that they modify what's showing in the browser window.
9. Click the Console tab at the top of the DevTools pane. This will open the JavaScript console.
10. Type the following JavaScript into the JavaScript console:

    document.getElementsByTagName('h1')[0].innerText

    When you press Enter, the text between the opening and closing <h1> tags will be logged to the console.

The important thing to know about everything we've done with the Chrome DevTools so far, and the first key to understanding how React works, is that you're not actually changing the HTML web page itself. That is safely stored on a web server. What you're changing is your web browser's in-memory representation of the web page. If you refresh the page, it will be re-downloaded and will appear as it did when you first loaded it.

The method that DevTools uses to manipulate the web page is through the Document Object Model, or DOM. The DOM is the JavaScript application programming interface (API) for web pages. By manipulating the DOM, you can dynamically alter anything in a web browser window. DOM manipulation is the way that JavaScript frameworks and libraries, including React, make web pages more interactive and more like native desktop applications.

React Developer Tools

To help developers debug React applications, Facebook created a browser extension called React Developer Tools. React Developer Tools is currently only available for Chrome and Firefox. Once installed, React Developer Tools gives you two new buttons in the browser developer tools: Components and Profiler.

Let's first look at how to install React Developer Tools and then we'll look at what it does.

Follow these steps to install React Developer Tools in Chrome:

1. Go to the Chrome Web Store at https://chrome.google.com/webstore using your Chrome browser.
2. Enter React Developer Tools into the search box. The first result will be the React Developer Tools extension by Facebook.
3. Click the React Developer Tools extension and then click the Add to Chrome button. The extension will be installed in your browser.

Here's how to install the React Developer Tools AddOn in Firefox:

1. Open your Firefox browser and go to https://addons.mozilla.org/en-US/firefox/addon/react-devtools/.
2. Click the Add to Firefox button.
3. When Firefox asks you for permission to install the AddOn, click Add.

Once it's installed, follow these steps to get started with using the React Developer Tools:

1. Open the Chrome DevTools or the Firefox Developer Tools.
2. Notice that if you're not currently viewing a web page that uses React, you won't see any difference in the Developer Tools.
3. Go to https://reactjs.org in your browser. In the Developer Tools, you'll see new tabs for Components and Profiler appear.
4. Click the Components tab. You'll see a tree view of the React user interface, as shown in Figure I-15.

Each of the items in the React Components view is a different component in the React application. On most public websites that use React, the component names that display in the React Developer Tools won't make much sense, and the React Developer Tools are only of limited functionality. This is because there are actually separate versions of React for development (which is when you're building and debugging the application) and for production (which is when the application is deployed and available to end users).

The production version of React uses minified component names, and most of the debugging functionality is removed in order to increase performance and decrease the size of the download required for the browser to run React.

Spend a few minutes clicking around the Components tab and exploring the different components. Click the inspector icon in the React Developer Tools, which appears in the upper left of the window and resembles the icon for the Chrome DevTools element inspector you saw earlier.

The React Developer Tools' element inspector works similarly to the Chrome DevTools' element inspector (and to the Firefox element inspector too, for that matter). The difference between these two tools is an essential one to understand, however. Whereas the browser's element inspector can be used to highlight and view the HTML and styles that are in the browser's DOM, the React element inspector allows you to highlight and view the React components that were rendered on the page. You can think of the Components tab as a higher-level view.

The React components you can inspect through the React Developer Tools eventually produce the DOM nodes (which represent HTML and styles) that you can browse using the browser's element inspector.

The Profiler gives you information about the performance of your React application. Profiling is disabled in the production version of React, so this tab won't do much when you view a public web page that uses React. We'll explore and use the Profiler and show how it can be used to debug and tune your React applications in Chapter 5.

Intro to Create React App

The most common way to get started with React is to use a node package called Create React App. Create React App is an officially supported tool that installs a toolchain for React development and configures a boilerplate React application that you can use as a starting point for your applications.

To install and run Create React App, you can use a command that comes as part of the npm package manager called npx. npx is a package runner. Earlier in this Introduction, you used the npm install command to install a node package. Once a package is installed, you can run it by using the npm start command. npx is similar to a combination of npm install and npm start. If the package is already installed globally on your computer when you issue a command to run it with npx, the already-installed package will be run. If it's not installed, running it with npx will cause it to be downloaded, temporarily installed locally, and run.

To create a new React app using Create React App, use the npx command, followed by create-react-app, followed by a name that you want to give your new React app. For example:

npx create-react-app my-new-app

Congratulations, and Onward!

If you've made it this far, you're well on your way to learning React. You have your toolchain set up, you've learned the basics of using two in-browser testing tools (Chrome DevTools and React Developer Tools), you've installed Create React App, and you've used it to generate a boilerplate React application.

Feel free to play around with the tools and commands you learned in this Introduction, and to try making additional changes to the Create React App boilerplate code to see what happens.

When you're ready, move on to Chapter 1, where you'll get hands-on experience with building and modifying your first React components!

Companion Download Files

As you work through the examples in this book, you may choose either to type in all the code manually or to use the source code files that accompany the book. All the source code used in this book is available for download from http://www.wiley.com/go/reactjsfoundations.

Working examples of each code listing, supplemental information, and a link to the book's Github repository are available at https://www.reactjsfoundations.com.

If you prefer to download and run the example code on your own computer, you can clone the repository using Git and then follow the instructions in the README file to view working versions of every code listing.

If you don't have Git installed, you can go to https://www.reactjsfoundations.com in your browser and click the Download button to download all of the code to your computer.

In the event that a “but” may have made it into this book, or some unforeseen update to React has necessitated a change to any of the code in the book, you'll find corrections at https://www.reactjsfoundations.com as well.

How to Contact the Publisher

If you believe you've found a mistake in this book, please bring it to our attention. At John Wiley & Sons, we understand how important it is to provide our customers with accurate content, but even with our best efforts an error may occur.

In order to submit your possible errata, please email it to our Customer Service Team at wileysupport@wiley.com with the subject line “Possible Book Errata Submission.”

Thinking in Components

React is a library for creating and putting together (or composing) components to build user interfaces. React components are independent pieces that can be reused and that can pass data to each other.

A component can be something as simple as a button or it can be more complex, such as a navigation bar that's made up of a collection of buttons and dropdowns.

As the programmer, it's your job to decide how big or how small each component in your application should be, but a good rule of thumb to think about is the idea of single responsibility.

The single responsibility principle, in programming, is the idea that a component should have responsibility for a single part of a program's functionality. Robert C. Martin, also known as “Uncle Bob,” is one of the most important thinkers and writers on software design. He described the single responsibility principle this way:

Single Responsibility means that a class [or what we call a “component” in React] should have only one reason to change.

Composition vs. Inheritance

In object-oriented programming (OOP), it's common to create variations of classes that inherit properties from a parent class. For example, a program might have a class called Button, which might have a child class called SubmitButton. SubmitButton would inherit all of the properties of Button, and then override or extend them to create its unique functionality and look.

Rather than using inheritance to create more specific components to deal with specific cases (such as a submit button), React encourages the creation of a single component that is more broadly reusable but that can be configured by passing data into it and then combining it with other components to handle more specific cases.

For example, in the case of a submit button, you might simply pass a parameter to a Button component called label and another parameter called handleClick that contains the action to be performed by the button. This generalized button can then serve multiple purposes, depending on the values of label and handleClick that are passed to it. Listing 2-1 shows what this component might look like.

Once you've created a configurable component, you can create more specific components by combining more generalized ones. This technique is called composition. Listing 2-2 shows how you can create a specific WelcomeDialog component from a general Dialog one using composition.

React Is Declarative

One way to describe the difference in approach between programming with React and programming with many other JavaScript libraries is to say that React is declarative while many other libraries are imperative.

So, what is declarative programming? Traditionally, the job of a programmer has been to break down complex processes into steps so that a computer can perform them. For example, if you want to program a robot to make you a sandwich, you might start by figuring out the high-level steps involved in the process:

1. Get two slices of bread.
2. Find a knife.
3. Get the peanut butter.
4. Use the knife to spread the peanut butter.
5. Assemble the sandwich.

Of course, these steps are far too high-level for a robot to perform, so you need to break down each one into smaller steps:

1. Get two slices of bread.
   • 1a. Use visual sensors to locate bread.
     • 1aa. If bread is found, move toward it.
     • 1ab. If bread is not found, return to step 1.
   • 1b. Use grabber arm to attempt opening of bread package.

You get the idea. By breaking down a complex process into small steps, a task eventually becomes simple enough for a computer to perform. We call this step-by-step style of programming imperative programming. The imperative approach is the way that most DOM manipulation libraries worked prior to React.

To change a paragraph of text in the browser using jQuery, for example, you would do something like this:

$('#para1').html('<p>This is the new paragraph.</p>');

This code looks for a paragraph with the id attribute equal to para1 and changes its HTML content to the new content that's specified inside the parentheses.

React takes a different approach, which we call declarative programming. In declarative programming, the computer (or the computer language interpreter, rather) has some intelligence about the types of tasks that it can perform, and the programmer only needs to tell it what to do, rather than how to do it.

In declarative programming, our sandwich-making robot would know the steps for making sandwiches, and programming it would involve the programmer saying something like “make me a sandwich that looks like this.”

Applied to DOM manipulation, the declarative approach that React takes is to allow the programmer to say, “Make the page look like this.” React then compares the new way that the page should look with the way that it currently looks and figures out what's different and what needs to change and how to do it.

Building and updating a React user interface, from the programmer's perspective, is just a matter of specifying what the user interface should look like and telling React to render it.

React Is Idiomatic

React itself is a small library with limited functionality when compared to other JavaScript libraries. Except for a handful of concepts and methods that are unique to React, React components are just JavaScript. If the structure and code of a React component looks foreign to you, it's likely because it uses a style of JavaScript programming that you're not yet familiar with, or because it makes use of a new feature in JavaScript that you're not yet familiar with. The good news is that by getting better at JavaScript, you'll get better at programming with React.

You may hear the term “idiomatic JavaScript” used to describe React. What this means is that React code is easily understandable to people who program JavaScript. The reverse is also true: if you know JavaScript, understanding how to write React is not too much of a stretch.

Why Learn React?

If you've made it this far in the book, you probably already have your own reasons for learning React. You already know by now that you're in good company—React's popularity has been growing from day one of its release into the wild. Surveys of developers have consistently shown that it's at the top, or very near the top, of their preferred libraries, and the list of companies that have already migrated to React or that are in the process of migrating to React is impressive, to say the least.

React is going to be around for a long time to come, and there's never been a better time to learn it.

React vs.…

The job of being a software developer today, especially one working with JavaScript and the web, requires some knowledge of a staggeringly large and growing number of libraries, frameworks, protocols, standards, best practices, and patterns. A great programmer not only knows how to apply whatever language and framework they are working in at any one time, but also how to quickly learn new languages and frameworks.

One good way to learn a new language is by comparing it to something that you already know, and the question “how does React compare to (x)” is one of the most common questions that my students ask me. In the following sections, I'll look at how React stacks up against its two closest rivals: Angular and Vue. While I don't like to take sides, I know enough about each to be able to give some facts and impressions.

What React Is Not

It's important to keep in mind not only what React is, but what it isn't. Beyond the often repeated (and largely semantic) argument about whether React is a library or a framework are the more important distinctions between front-end libraries, back-end libraries, and the development environment.

React, as it's used most often, is a front-end library. This means that everything React does happens in the web browser. It can't directly control or access remote databases (except through the web), and it doesn't serve web pages.

When I'm asked about the differences between front-end, back-end, and development environments in my classes, I like to draw something like the diagram in Figure 2-4.

You know already that React is a front-end JavaScript library. As you can see from the preceding diagram, there are many other pieces of the web ecosystem. Here are a few of the things that React is not.

How JSX Works

React uses JSX elements to represent custom components (which are also known as user-defined components). If you create a component named SearchInput, you can make use of that component in other components by using a JSX element named SearchInput, as shown in Listing 3-2.

In the same way, React has components built into it for each of the elements in HTML5, and you can use any HTML5 element name when you write your React components and the result will be that React will output that HTML5 element. For example, say you want your React component to result in the rendering of the following piece of HTML markup:

<label class="inputLabel">Search: 
  <input type="text" id="searchInput">
</label>

The JSX code for telling your React component to output that HTML would look like this:

<label className="inputLabel">Search:
  <input type="text" id="searchInput"/>
</label>

If you study both of the preceding snippets closely, you'll find a couple of differences. The difference between them, and the fact that JSX is not HTML, are of vital importance to understanding what JSX is really doing.

It's fully possible to create React components without using JSX by using the React.createElement method. Here's what the code to output the previous HTML markup looks like when you write it using React.createElement:

React.createElement("label", {className: "inputLabel"}, "Search:", 
  React.createElement("input", {type: "text", id: "searchInput"}));

If you examine this JavaScript code closely, you should be able to figure out basically how it works. The React.createElement method accepts an element name, any attributes of the HTML element, the element's content ("Search:" in this example) and its child element or elements. In this case, the label element has one child, input.

That's pretty much all there is to React.createElement. If you're interested in learning the exact syntax of React.createElement, you can read more about it here:

https://reactjs.org/docs/react-without-jsx.html

In reality, however, very few React developers ever have to think about React.createElement, because we use a tool called a transpiler as part of our development environment.

Transpiler … Huh?

Before you can run a React application that uses JSX and modules, it must first be compiled. During the compile (also known as “build”) process, all of the modules are joined together and the JSX code is converted into pure JavaScript.

Introducing Babel

The tool we use for transpilation in JavaScript is called Babel. Babel is integrated into Create React App and is an automatic part of compiling a React app built with Create React App.

It can be interesting sometimes to see how Babel converts JSX into JavaScript, and you can do this by either viewing the source code for a running React application or by pasting your JSX code into the web-based version of Babel at https://babeljs.io/repl, as shown in Figure 3-1.

Babel does much more than just convert JSX into JavaScript. It also takes JavaScript in your components that's written using new and experimental syntax that might not be supported by all of your target web browsers and converts it into JavaScript that can be understood and run in any web browser that you expect to access your React user interface.

JSX Is JavaScript XML

The first thing to know about JSX is that it's XML. So, if you know a little bit about XML (or if you've used XHTML), the rules of writing JSX should sound familiar. Namely:

• All elements must be closed.
• Elements that cannot have child nodes (so-called “empty” elements) must be closed with a slash. The most commonly used empty elements in HTML are br, img, input, and link.
• Attributes that are strings must have quotes around them.
• HTML elements in JSX must be written in all lowercase letters.

Beware of Reserved Words

Because JSX compiles to JavaScript, there is the potential that an element name or attribute name that you use in your JSX code can cause errors in your compiled program. To guard against this, certain HTML attribute names that are also reserved words used in JavaScript have to be renamed, as follows:

• The class attribute becomes className.
• The for attribute becomes htmlFor.

JSX Uses camelCase

Attribute names in HTML that contain more than one word are camel-cased in JSX. For example:

• The onclick attribute becomes onClick.
• The tabindex attribute becomes tabIndex.

Preface Custom Attributes in DOM Elements with data-

Prior to version 16 of React, if you needed to add an attribute to a DOM element that doesn't exist in the HTML or SVG specification for the element, you had to preface it with data-, or else React would ignore it. Listing 3-3 shows a JSX HTML equivalent element with a custom attribute.

Starting with React 16, however, you can use any custom attribute name with built-in DOM elements. Custom attributes in DOM elements can be useful for including arbitrary data with your markup that doesn't have any special meaning or affect the presentation of the HTML in the browser. Although it is possible to use custom attributes for DOM elements, this is not generally considered a good practice.

User-defined elements, on the other hand, can have custom attributes with any name, as shown in Listing 3-4.

Using custom attributes with user-defined elements is the primary way that React passes data between components, as you'll see in Chapter 4.

JSX Boolean Attributes

In HTML and in JSX, certain attributes don't require values, because their presence is interpreted as setting their value to a Boolean true. For example, in HTML, the disabled attribute of input elements causes an input to not be changeable by the user:

<input type="text" name="username" disabled>

In JSX, the value of an attribute can be omitted when it is explicitly true. So, to set the disabled attribute of a JSX input element to true, you can do either of the following:

<input type="text" name="username" disabled = {true}/>
<input type="text" name="username" disabled/>

Use Curly Braces to Include Literal JavaScript

When you need to include a variable or a piece of JavaScript in your JSX that shouldn't be interpreted by the transpiler, use curly braces around it. Listing 3-5 shows a component whose return statement includes literal JavaScript in JSX attributes.

When to Use JavaScript in JSX

The concept of separation of concerns in programming says that layout code should be separated from logic. What this means in practice is that code that does calculations, retrieves data, combines data, and controls the flow of an application should be written as functions outside of the return statement in a component, rather than inside of curly braces in JSX.

Limited amounts of logic are necessary and perfectly normal inside of the return statement, however. There's no hard-and-fast rule for how much is too much, but, generally, any JavaScript that you write in your JSX should only have to do with presentation, and it should be single JavaScript expressions, rather than functions or complex logic.

An example of purely presentational JavaScript would be the case of conditional rendering.

Conditionals in JSX

Oftentimes, a component needs to output different subcomponents, or hide certain components, based on the results of expressions or the values of variables. We call this conditional rendering.

There are three ways to write conditional statements in JavaScript, and you may use any of these to do conditional rendering.

Expressions in JSX

You can use any JavaScript expression inside of your JSX or inside of React element attribute values by surrounding it with curly braces. JSX elements themselves are JavaScript expressions as well, because they get converted into function calls during compilation.

To understand what JavaScript you can and can't include in JSX, let's take a brief look at what a JavaScript expression is.

An expression is any valid unit of code that resolves to a value. Here are some examples of valid JavaScript expressions:

• Arithmetic: 1+1
• String: "Hello, " + "World!"
• Logical: this !== that
• Basic keywords and general expressions: This includes certain keywords (such as this, null, true, and false) as well as variable references and function calls.

Examples of structures in JavaScript that do not return a value (and are thus not expressions) include for loops and if statements, as well as function declarations (using the function keyword). You can still use these in your React components, of course, but you'll need to use them outside of the return statement, as we did in Listing 3-9.

Functions can be included in JSX, provided that they're invoked immediately and that they return a value that can be parsed by JSX, or that they're passed as values for an attribute. The component in Listing 3-12 has a return statement that includes a function as an event handler.

Listing 3-13 shows an example of using a function that's immediately invoked and that's valid in JSX.

Using Children in JSX

The return statement in a React component can only return one thing. This one thing can be a string, a number, an array, a Boolean, or a single JSX element. Keep in mind, however, that a single JSX element can have as many children as you like. As long as you start and end your return statement with a matching opening tag and closing tag, everything in between (provided that it's valid JSX or a JavaScript expression) is fine.

Here's an example of an invalid JSX return value:

return(
  <MyComponent/>
  <MyOtherComponent/>
);

One way to make this a valid JSX return value is to wrap two elements with another element, like this:

return(
  <div>
    <MyComponent/>
    <MyOtherComponent/>
  </div>
);

With the div element wrapping the two user-defined elements, we now have a single element being returned.

React Fragments

Although it's quite common to see multiple elements wrapped with a div element or another element for the purpose of returning a single JSX element, adding div elements just for the sake of eliminating errors in your code, rather than to add necessary meaning or structure to your code, creates code bloat and decreases the accessibility of your code.

To prevent the introduction of unnecessary elements, you can use the built-in React.Fragment component. React.Fragment wraps your JSX into a single JSX element, but doesn't return any HTML.

You can use the React.Fragment component in one of three ways:

1. By using dot notation: <React.Fragment></React.Fragment>
2. By importing Fragment from the react library using curly braces
3. By using its short syntax, which is just a nameless element: < > < / >

Listing 3-14 shows how to use React.Fragment in a component.

Listing 3-15 shows how to use the short syntax for React.Fragment.

The result of running either Listing 3-14 or Listing 3-15 is that just the h1 and h2 HTML elements will be returned.

Components Define Elements

The job of a component is to return an element.

Each component within an application has a unique name, which is how you use it. The component name becomes the name of the React element when you include a component in another component, as shown in Listing 4-1.

In this very simple example, WelcomeMessage is a React component that was created using a function and exported as a JavaScript module. Once it's exported, WelcomeMessage can be imported into any other React component where you need to make use of its functionality, as shown in Listing 4-2.

It's not a requirement that each component have its own module, but that's the most common way components are defined. In components created using a default export, the file containing the module usually takes the name of the component defined in the file.

Once you import a component into another component, this is where React elements come in.

Elements Invoke Components

Once you've imported a component into another component, the imported component's functionality can be included in your new component's JSX using an element. You can include as many components inside another component as you need to, and there's no limit to how many levels of components a tree of components can have. Once you import a component, you can use the element it defines as many times as you need to and each usage will create a new instance of the component with its own data and memory.

In general, the point of using components is to provide a higher level of abstraction that reduces the complexity of an application and enables reuse. Listing 4-3 shows an example of a top-level React component that uses the functionality of other components to display a shopping cart user interface.

Notice that the component in Listing 4-3 uses a combination of ordinary JavaScript and imported modules to return a combination of custom elements and HTML elements. It's fairly trivial to figure out the gist of what will be rendered by this component just by looking at the return statement.

The entire component could have been written with everything in a single file, as shown (partially) in Listing 4-4, but the result would be a file that would be much larger, more difficult to work with, and more difficult to maintain.

Don't worry if much of the code in Listing 4-4 looks strange or unfamiliar to you. Remember that React is just JavaScript, and this example uses several relatively new JavaScript tools and functions that I'll explain later in this chapter.

HTML Element Components

React's built-in HTML element components have the same names as elements from HTML5. Using them in your React app causes the equivalent HTML element to be rendered.

Many React developers (and web application developers in general) tend to use the div element for every type of container in their user interfaces. While this is convenient, it's not always recommended. HTML is a rich and descriptive language when used correctly, and using meaningful (aka semantic) HTML elements to mark up your content makes it more accessible for search engines and people as well.

Table 4-1 shows all the HTML elements that React supports, along with a brief explanation of each element. If an element that you want to use in your user interface isn't on this list, try using it to see if it's been added since this list was compiled. If it isn't, you can submit a request to Facebook that the element be added to React by filing an issue in the React github.com repository at https://github.com/facebook/react/issues/new.

Attributes vs. Props

In markup languages (such as XML and HTML), attributes define properties or characteristics of the element, and are specified using the name=value format.

Because JSX is an XML markup language, JSX elements can have attributes, and there's no limit to the number of attributes that a single JSX element can have.

Class Components

Classes were new to JavaScript when React was first released. The early versions of the React library had a function called React.createClass, which was the only way to create components. To use React.createClass, you could pass an object containing the component's properties as a parameter to the function and the result would be a React component.

In one of the bigger changes made to React in its lifetime so far, React.createClass was deprecated as of React 15.5.

You can still use createClass if you need to by installing the create-react-class package. Listing 4-8 shows the code for a component created using createClass.

Beginning with React 15.5, the preferred way of writing classes was by extending the React.Component base class directly.

Listing 4-9 shows how to write the component from Listing 4-8 using a class that extends React.Component.

Stepping through a React Class Component

Once you have an understanding of how prototypal inheritance works in JavaScript, and you know that classes are just another way to use function constructors, creating React components using the class method is actually quite easy and it becomes a powerful tool in your React toolbox.

Let's take a look, piece by piece, at a basic class component.

import React from 'react';

import {Component} from 'react';

class MyComponent extends React.Component{

class MyComponent extends Component{

constructor(props) {
  super(props);
  this.state = {
    score: 0;
    userInput: ''
  }
  this.saveUserInput = this.saveUserInput.bind(this);
  this.updateScore = this.updateScore.bind(this);
}

import {Component} from 'react';
 
class MyComponent extends Component {
 
  constructor(props){
    super(props);
    this.state = {};
  }
  ...
}
 
export default MyComponent;

Managing State in Class Components

The constructor function is the only place where you should ever directly update the state object of a component. For updating the state after the constructor function has run (during the life of the component, in other words), React provides a function called setState.

The setState function tells React to update the state of the component using an object or function that you pass into it.

Listing 4-12 shows a class component that displays a counter and has a button for incrementing that counter.

A very important point to remember about the setState function (and one that I'll repeat frequently because it's so important and can be the cause of many bugs in React apps) is that setState is asynchronous, and changes to state that you make using setState may be batched for performance reasons.

The reason that the asynchronous nature of setState is important is that if you try to access state immediately after setting it, you may get the old value rather than the new value that you expect. In Listing 4-13, I've added a console.log statement immediately after the setState function in the incrementCount method. Even though the console.log statement appears after setState, it will log the value of this.state.count prior to the incrementing happening, as shown in Figure 4-2.

We'll talk about how to work with state to avoid this problem in Chapter 6.

Creating and Using Props

Props are the arguments that you pass into a component from a parent component. With JSX, the attributes that you write (which take the form of name=value in JSX elements) become properties inside the props object of the resulting component instance.

To illustrate how props work, let's create a component that will make use of the BasicFigure component. I'll call this component FigureList. The code for FigureList is shown in Listing 4-15.

You can probably figure out from looking at the code for this component and the BasicFigure component that the result of rendering FigureList will be that three identical figures and captions will be outputted. To make our figures different, we need to pass data from FigureList to BasicFigure. This is where props come in, as shown in Listing 4-16.

With these attributes in place, the first part of rendering different output from a single component is in place. The BasicFigure component instances are all receiving different props.

The next step is to modify the BasicFigure component so that it makes use of the received props. We can do this by inserting variables in place of static values in the return statement, as shown in Listing 4-17.

With that done, the FigureList component will now render three BasicFigure components, each of which will output a figure element with different images and captions. I've changed the value of the display style property to flex so that they'll display in a row, rather than vertically, as shown in Figure 4-3.

Function Components

Now that you understand JavaScript classes, how the this keyword works in JavaScript, what the constructor is, and the basics of writing React components using the class method, we can get to the good stuff.

Although a knowledge of classes is important for understanding how React works, the React world is moving very quickly away from using classes whenever possible. The reason: using classes is complicated, and many people don't understand how this works. If you do have an understanding of classes and how the this keyword works in JavaScript, you'll have a better appreciation and understanding of how function components work, so I do recommend learning about classes still.

The function component was created to simplify the creation of React components. To illustrate how much easier writing a function component can be than a class component, consider the simple To Do List example class in Listing 4-18.

Listing 4-19 shows how you can write a component that does the same thing as the class in Listing 4-18 using a function component.

Notice how much simpler the function component version is. There's no render method, no constructor, and no binding of this. It's even possible to further simplify this function component by removing the import of React, since we're not directly using it, using an arrow function for the component, and moving the export statement up to the function expression, as shown in Listing 4-20.

Note that in this example, we've changed the export from a default export to a named export. To import this component into another component, you'll need to surround the name of the component with curly braces, like this:

import {ToDoFunction} from './ToDoFunction';

Now that you've seen how much more simple function components can be than class components, let's look at how to write them and what their limitations are.

function Foo(props){
  return <h1>Welcome</h1>;
}
 
export default Foo;

const Foo = function(props){
  return <h1>Welcome</h1>;
}
 
export default Foo;

const Foo = (props) => {
  return <h1>Welcome</h1>;
}
 
export default Foo;

export const Foo = props => <h1>Hello, World!</h1>;

import {useState} from 'react';

const [todos, setTodos] = useState([{item: 'Learn About Hooks'}]);

Differences between Function and Class Components

Table 4-2 summarizes the main differences between function components and class components.

this.props.children

Every component in a React UI has a property called children that stores the children of that component. By using this.props.children (or props.children in the case of function components) in the return statement of a component, you can create components where the child components aren't known until the component is invoked.

For example, Listing 4-23 shows a component named ThingsThatAreFunny, which you can wrap around any other components and it will render them with a title of “Here are some funny things.”

To use the ThingsThatAreFunny component, split it into starting and ending tags instead of using the self-closing slash at the end of the component element name. Between the starting and ending tags, include child elements that you want to be rendered inside of it, as shown in Listing 4-24.

Assuming that the Joke component outputs one joke, the result of rendering the ThingsILike component is shown in Figure 4-4.

Manipulating Children

React provides several built-in ways to access information about and manipulate elements. These are:

• isValidElement
• cloneElement
• React.Children

const NewElement = React.cloneElement(element,[props],[children]);

Mounting

The mounting stage includes everything from when a component is first constructed until it is inserted into the DOM. During the mounting lifecycle stage, the following methods run, in this order:

• constructor
• static getDerivedStateFromProps
• render
• componentDidMount

Updating

After your component has mounted, the updating lifecycle methods start running. React components update their data and re-render in response to changes to the state object made using the setState function. Every time a component updates, the following methods run, in this order:

• static getDerivedStateFromProps
• shouldComponentUpdate
• render
• getSnapshotBeforeUpdate
• componentDidUpdate

The getDerivedStateFromProps and render methods serve the same purposes in the updating stage as they do during the mounting stage. So, let's take a look at the three lifecycle methods that are unique to the updating stage.

shouldComponentUpdate(){
  return false;
}

Unmounting

The process of removing a component from the DOM is called unmounting. Only one lifecycle method, componentWillUnmount, happens during this process.

Error Handling

The fourth type of lifecycle methods are the ones that only run when something goes wrong with your component. These lifecycle methods are getDerivedStateFromError and componentDidCatch. I'll talk about both of these methods further in Chapter 13, but I want to introduce them to you here.

Improving Performance and Avoiding Errors

Lifecycle methods can be used to improve the performance of your React application and to prevent errors. In the following sections I'll talk about a few tools and techniques you can use to make your components the best they can be.

Avoiding Memory Leaks

To demonstrate the use of several lifecycle methods, we can look at a common problem in React applications—a memory leak—and how to fix it.

A memory leak is a fault in a computer program where memory is allocated unnecessarily. This can happen when a component is unmounted without removing timers or network requests involving the component continue to happen after the unmounting.

Because a memory leak is a wasted use of resources, having a memory leak in your program can lead to reduced performance and unexpected behaviors. Memory leaks have a tendency to build up the longer a program is running, and so you may not notice them at first but things can start to get weird as they accumulate. So, it's best to take action to avoid them.

To avoid memory leaks, you should always make sure to properly clean up after your components using the componentWillUnmount() method.

Listing 4-31 shows a component that uses the JavaScript setInterval function to increment a counter.

The component's parent has a method, invoked using a button, that toggles whether the Counter component is rendered or not, as shown in Listing 4-32.

When the App component mounts, the Counter component will also mount and the timer will start running and incrementing the counter in the browser and in the console, as shown in Figure 4-6.

When you click the Toggle Count button, the Counter component will disappear. However, the timer created by the setInterval function in the Counter component is never cleared, and so it continues to run after the component is removed.

After the component is unmounted, React will log a message to the browser console to tell you that you're attempting to call setState on an unmounted component, as shown in Figure 4-7.

Trying to call setState on an unmounted component won't do anything, since an unmounted component doesn't have state. But, as React's error message points out, it's indicative of a memory leak.

To fix this problem, you can use the componentWillUnmount method in the Counter component to call clearInterval, which will stop the timer before the Counter component is unmounted, as shown in Listing 4-33.

Now Counter will be properly unmounted and the timer will be cleared when it's removed from the browser. If you click the Toggle Counter button again, the counter will start over as you would expect it to, because a new timer will be created.

Rendering with ReactDOM

The most common place for a tree of React elements to end up being used is in a web browser. The library responsible for converting a React component into HTML and inserting it into the DOM and then managing updates to the DOM is ReactDOM.

ReactDOM includes several methods that you can use to interact with the DOM, but the one that's absolutely necessary for every React application designed for the browser to use is ReactDOM.render.

If you look at the index.js file at the root of the src folder in a React project created using Create React App, you'll see where ReactDOM.render is invoked and where a single React element (which may be optionally wrapped with a React.StrictMode component) is passed in, as shown in Listing 4-37.

The beauty of ReactDOM.render is that it performs an incredible number of calculations and DOM manipulations, controls the timing of DOM updates, manages the virtual DOM, and more—but as far as you, the programmer, are concerned, it's a black box. All you need to do is feed it a valid React component and a DOM node where you want that component to be rendered and ReactDOM.render takes it from there.

If you examine the code in Listing 4-37, you'll see that, in this case, we're telling ReactDOM.render to render the App component (you can ignore the StrictMode wrapper) inside the HTML element node that has an id attribute with a value of root.

Every React application designed for rendering to web browsers will have a single HTML file that imports the React and ReactDOM libraries, plus all the rest of the JavaScript that the application needs. In the case of a Create React App application, this file is public/index.html. Listing 4-38 shows a version of Create React App's index.html file (with the HTML comments and unimportant meta tags removed to save space). When a JavaScript application lives within a single HTML file like this, we call it a single page app.

Virtual DOM

After the root component has been mounted, the job of ReactDOM.render is to monitor changes to the rendered element coming in from React and figure out the most efficient way to update the browser DOM to match the newly rendered application through a process called reconciliation.

As a programmer, you can think of rendering a React UI as a continual process of replacing a previous tree of elements with a new one: and this is in fact what React is doing. But, once a new tree of elements gets to ReactDOM.render 's reconciliation process, it looks for the minimal set of changes and just makes those.

For example, compare the element shown in Listing 4-39 with the element in Listing 4-40. The second listing could be the <nav> element that results from the user clicking the “About Us” link.

The only difference between these two element trees is which one has the active class. ReactDOM.render will find this difference during reconciliation and will simply remove active from the first link's class element and add it to the second link's class element without modifying anything else.

This process of rendering the new UI in memory and then comparing it with the previous UI and figuring out the minimal set of changes that can be applied to the browser DOM to make the previous state match the new one is what we call the Virtual DOM.

One important thing to know about how reconciliation works is that updates to the browser DOM won't always happen in the same order as when they were rendered in the Virtual DOM. This is because ReactDOM.render may batch changes if it creates more efficiency.

Once again, the Virtual DOM's inner workings happen without your intervention, and you won't need to know exactly what's happening in the reconciliation process (except perhaps in very rare cases). Knowing that it exists is important, however.

If you'd like to learn more about how reconciliation works, you can read about it in more detail at https://reactjs.org/docs/reconciliation.html.

Other Rendering Engines

React doesn't care whether you render the elements that it outputs in a web browser, on a billboard, as a mobile app, as text in a terminal application, or in any other user interface device.

Although ReactDOM is the most commonly used rendering engine, and thus the one that most books and tutorials on React focus on, other rendering engines can and do exist. The following sections explore a few of the most common ones.

React Native

React Native converts React elements into native mobile applications. React Native has a set of built-in elements that, when rendered, result in the creation of commonly used native app components such as View, Text, ScrollView, and Image.

After React renders a tree of React Native elements, the React Native rendering engine compiles these elements into platform-specific code for different mobile operating systems (such as Android or iOS).

Listing 4-41 shows a “Hello, World” component written with React Native.

Everything here is standard React and JavaScript, and everything you're learning about React also applies to React Native. The only difference is that React Native adds a library of components that are relevant to native mobile apps, and React Native components are compiled into native mobile apps rather than for web browsers.

After you write your React Native code, it needs to be compiled to generate platform-specific code that you can deploy on mobile devices or to app stores. You can compile React Native components using a Node.js program called Expo CLI (CLI stands for “command-line interface”), or by using the React Native CLI.

React Native CLI requires you to have the appropriate native app development tools installed (either XCode for iOS apps, or Android Studio for Android apps). Expo CLI compiles your apps and deploys them inside a wrapper Expo mobile app on mobile phones.

While React Native CLI is more familiar to developers who already have experience with mobile app development, Expo is great because it's so easy to use and will have you writing functioning mobile apps very quickly.

Figure 4-8 shows the “Hello, World!” app from Listing 4-41 running on an iPhone.

Working with the Component Tree

The left side of the Components window shows a nested list containing each of the components that make up the current view in the browser. In the React Bookstore app, this includes the root component, App, the ProductList component, a long list of Product components, and the Cart component.

Each parent component has an arrow next to it, which you can click to expand or collapse the children within that component. For example, if you collapse the ProductList, the outline will look like Figure 5-4.

With ProductList collapsed, you can see that the React Bookstore is made up of two main sections: the list of products, and the cart. The list of products includes all of the products being viewed (which is currently all of them) and the cart contains any items that are currently in your shopping cart.

If you click the Add to Cart button under one of the products, you'll see that in the browser window, the title and price of that product are added to the cart area of the screen, and in the Component window of React DevTools, a CartItem component is added as a child of Cart. If you click Add To Cart for several products, several CartItem children will be created, as shown in Figure 5-5.

Searching for Components

There are two ways to search for components. One is using the Search input box. The other is using regular expressions.

Using Regular Expressions

Regular expressions are a way to search for text based on a pattern. To distinguish regular expressions from ordinary text searches, React DevTools uses slashes before and after the expression. For example, if you wanted to find all of the components that contain the word “Product,” you could do so using the following regular expression:

/Product/

Right now, however, this regular expression will highlight the exact same list of components as if you just searched for the word “product” without the slashes before and after it.

Where regular expressions come in handy is for more complex searches than can be done with ordinary text searches. For example, if you wanted to select all of the Product components, but not the ProductList component, you could use a regular expression such as this one:

/Product$/

The dollar sign at the end indicates that you're only looking for component names that end with the word “Product.”

If you want to find components that match the name Cart or the name ProductList, you can use the OR operator, which is a vertical bar in regular expressions, like this:

/(Cart$|ProductList)/

In addition to the “ends with” operator ($), regular expressions also have a “begins with” operator, which is the caret (^). For example, the following regular expression search will find any component with a “c” in its name:

/c/

The result of running the preceding regular expression search is shown in Figure 5-6.

If you add a ^ to the beginning of the search term, it will only show the Cart and CartItem components, as shown in Figure 5-7.

I've only touched on a few of the capabilities of regular expressions here. For a more complete list of the capabilities of regular expressions and more examples of how to use them, visit the Mozilla Developer Network Regular Expressions Cheatsheet at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet.

Filtering Components

When you first open the React DevTools, you're actually only seeing a partial list of the React components that make up your user interface. Although all of the custom components that make up what's currently on the screen are showing, the built-in HTML components (which React DevTools refers to as “host components”) are hidden.

To reveal all of the host components as well as the custom components, you can adjust the filtering in the View Settings.

Click the gear icon in the upper right of the Component window's tree view, and the settings dialog box will open, as shown in Figure 5-8.

The Components tab in the settings dialog will be open, and you'll see a checkbox for expanding the tree of components by default. Underneath that is an area where you can define filters that will be applied to the component tree.

The default component tree filter hides all host components. If you disable this filter, you'll see why you may also want to uncheck the “Expand component tree by default” checkbox and why it's so important for React DevTools to have a Search feature—when you include the host components, the list of components becomes very long (as shown in Figure 5-9).

The filter feature in the settings dialog allows you to create filters based on the location, name, type, and whether components are higher-order components.

Selecting Components

In addition to finding components using the Search input box, you can also select components just by clicking on them in the tree view, or by using the Select tool, which is shown in Figure 5-10.

No matter how you select a component, once you do, the inner workings of that component will show up in the pane on the right side of the Components window. If multiple components are selected, the details for the first selected component will be shown.

Understanding One-Way Data Flow

Figure 6-1 illustrates how unidirectional data flow works.

Unidirectional data flow doesn't mean that child components can't send data to parent components. Sending data from child components (for example, an input form) to parent components (for example, the form containing the input) is a critical part of interactivity. However, one-way data flow does mean that the way you send data from a child component to a parent component or between sibling components is different from how you pass data from a parent to a child.

To understand one-way data flow, it's helpful to look at an example of two-way data flow. To use two-way binding in Angular, you can use a combination of brackets, like this:

<search-form [(term)]="searchTerm"></search-form>

Assuming that the preceding code causes a search form to be rendered, the combination of square brackets and parentheses indicate that the searchTerm variable should be passed into the component represented by the search-form element (downstream data flow) and that when the value of the search term changes within the component represented by the search-form element, the value of the searchTerm variable should be updated (upstream data flow).

In React, passing data downstream is done using props, like this:

<SearchForm term={searchTerm}/>

However, because of unidirectional data flow, updating the value of the searchTerm variable from within the SearchForm component requires an event to be triggered. In function components, the event that allows you to pass data upstream is created when you use the useState hook.

Before we get to how that works, let's look briefly at why React uses one-way data flow and the benefits of it.

Why One-Way Data Flow?

Two-way data flow, also known as bidirectional data flow, where a component's data can be modified by its parent and changes within the component can directly affect data in the parent, is convenient. However, it also increases the complexity of a user interface, and this, in turn, increases the potential for errors.

Figure 6-2 shows an example of a user interface that makes use of two-way data flow. Notice that there are multiple ways for data in the model to be changed, and the controller is required in order to manage changes.

In bidirectional data flow, it's not possible to tell whether the view was updated by the user interacting with the view or by the data in the model changing.

Figure 6-3 shows a diagram of one-way data flow in a user interface. The only way that a view (what's displayed in the browser) can be changed is by changing the data in the model (which is the state object in React).

A view in unidirectional data flow can be expressed as a simple function:

V = function(data)

If you want to test whether a piece of data in unidirectional data flow is being properly updated, or test that the change to a variable in unidirectional data flow has the intended consequences, there's only one thing to test: whether changing the state of the application modifies the view as expected.

Components Receive Props

When you write a JSX element in React, the attributes that you give an element are passed to the component as properties in an object. For example, consider this JSX element:

<Taco meat="chicken" produce={[cabbage,radish,cilantro]} sauce="hot"/>

If Taco is a function component, this element is the same as the following JavaScript function call:

Taco({meat:"chicken",produce:[cabbage,radish,cilantro],sauce:"hot"});

Inside the Taco function's header, the object passed to the function is given the name props, which is how you can access it inside of the function:

function Taco(props){
  return (<p>Your {props.sauce} {props.meat} taco will be ready shortly.</p> 
}
export default Taco;

Because props is a JavaScript object, you can have as many or as few properties in the prop object as you need, and there's no requirement that each prop be passed each time you use a component.

Props Can Be Any Data Type

The props you pass to a component can be any type of JavaScript data, including any of the six primitive data types (undefined, Boolean, Number, String, BigInt, and Symbol) as well as objects, functions, arrays, and even null.

Because of JSX's ability to include JavaScript expressions through the use of curly braces, the data passed to a component through the props object can be determined through the use of a variable or any JavaScript expression or function call.

Props Are Read-Only

Once data has been passed to a component using props, that data is treated as immutable. This means that although a component receives props, once those props are values inside the component, your component can't change them.

This is the strictest rule in React: a component must act like a pure function with regard to its props.

The reason for this rule is that React only re-renders components in response to state changes. Props are the mechanism for updating components according to state changes. If you were to change the value of a prop inside a component, it would cause the internal data of your component to be out of sync with what's displayed in your browser and the value of the prop would be reset by the parent component with the next render. In other words: changing props inside a component won't have the effect that you want.

If you attempt to change the value of a prop, you'll get an error. However, the problem with mutating props can be illustrated by looking at what happens when you change any variable inside a component without triggering a re-render.

In Listing 6-1, a stateful variable is passed as a prop from a parent component (App) to a child component (PropsMutator). Inside PropsMutator, a local variable is created to hold the value of the prop. This local variable is also used inside the return statement.

A function called changeProp increments the value of the local copy of the prop and then logs it to the console.

Figure 6-4 shows what happens when you run this component and click the change myNumber button several times.

The second button in Listing 6-1 shows the correct way to modify a value that will be used in the return method. In this button, we call a state change function, setTheNumber (which is passed to the component from its parent) and pass in a new value. The state change function modifies the state variable and then re-renders, which causes the new value to be passed into the child component.

Figure 6-5 shows the result of clicking the change myNumber button several times, followed by clicking the use setTheNumber button, followed by clicking change myNumber again.

Make sure that you understand this example before moving on to the next section, because if you see what's happening in Figure 6-5, the distinction between props and state will make perfect sense and you'll have a much better idea of when to use each.

Validating Incoming Props with PropTypes

When you invoke a JavaScript function and pass in arguments, the function doesn't care what type of data the arguments are, whether they're passed in at all, or whether more or fewer arguments are passed in than the function defines. The same things are true with props that you pass from a parent component to a child component.

For programs to operate correctly, however, it often is important that the props that are passed to a component are the same type of data that the component is expecting. For example, if your component expects a prop called itemPrice to be a number, an error may occur if a parent component passes itemPrice as an object.

React programmers (and programmers in general) must account for the possibility of incorrect data types being passed to any function that receives arguments. But, it's not always easy to figure out and detect possible data type problems with a dynamically typed language such as JavaScript.

To help with keeping track of a component's expected input and finding possible problems, we can use a tool called PropTypes.

What Is PropTypes?

PropTypes is a tool for type checking and documenting props in React components. For each prop in your component, you can specify rules that the value coming into the prop will be tested against. If the prop value doesn't pass those rules, a message will be displayed in the JavaScript console in your browser.

PropTypes only displays these warning messages when you're using the development version of React. Once your app is deployed and using the production version of React, PropTypes is silent.

For example, the WelcomeMessage component in Listing 6-2 uses a prop called firstName to display a customized header message. You can tell from looking at the code in this component that the value of the firstName prop should be a string.

By now, you should be able to guess what the output of this component will be when you pass a first name into it through an element like the following:

<WelcomeMessage firstName = "Grover"/>

But, what happens if you pass something that's not a string into the firstName prop? The following element passes an array into the firstName prop:

<WelcomeMessage firstName = {['Jimmy','Joe']}/>

The result may not be what you'd expect, as shown in Figure 6-6.

React doesn't consider this case to be an error, so it may not be obvious at first what the cause of the unexpected output is. This is especially true in components that make use of many different props.

Listing 6-3 shows how you can use PropTypes to validate this prop.

With the PropType specified for firstName, when WelcomeMessage receives a value of firstName that isn't a string, a warning message will be displayed in the console, as shown in Figure 6-7.

Use of PropTypes in React is optional, and whether you use it or not, it won't fix errors by itself. It also won't cause your application to not compile if a prop fails its checks. It's purely a development tool. However, it's a great way to catch bugs in your components and to document your components. Getting into the habit of using PropTypes will improve your React components and make it easier for other programmers who may use your component in the future to know what data it requires.

Getting Started with PropTypes

PropTypes is not part of the core React library. To use it, you first have to install it. If you bootstrapped your app with Create React App, it's already been installed for you. Otherwise, you can install it by running the following command from the root of your project:

npm install prop-types --save

Once PropTypes is installed, you'll need to include the PropTypes library into each component where you use it. At the beginning of the file containing your component, use the following import:

import PropTypes from 'prop-types;

Once imported, PropTypes works the same with both function and class components, but where you place the PropTypes may differ.

To use PropTypes, you just need to add a property called propTypes to the component. Note that the PropTypes library, which contains different ways of validating props, starts with a capital P. The property that you add to your component to cause it to do type checking starts with a lowercase p.

The propTypes property is a static property, meaning it operates at the component level, not the component instance. In class components, this means that you can use the static keyword to put your propTypes property in the body of your class, as shown in Listing 6-4.

You can also add the propTypes object into your class component by putting it outside of the class body, as shown in Listing 6-5.

In function components, the propTypes object always goes outside of the function body, as shown in Listing 6-6.

What Can PropTypes Validate?

PropTypes can perform a wide variety of checks on a component's props, including the data type (as you've seen), whether required props are passed, the shape of properties passed as objects, and more. In this section, I'll explain and demonstrate all of the different validation rules contained in PropTypes.

Validating Data Type

You've already seen how to check whether a prop is one of JavaScript's data types. The validators for JavaScript types are:

• PropTypes.array
• PropTypes.bool
• PropTypes.func
• PropTypes.number
• PropTypes.object
• PropTypes.string
• PropTypes.symbol

The purpose of each of these should be self-evident, but note that a couple of the validators, bool and func, have names that are different from the names of the JavaScript data types.

When you use one of these data type validators by itself, PropTypes will treat the prop as optional. In other words, a missing prop won't trigger a PropType warning message by default.

Validating Required Props

If a component requires a prop to be passed to it, you can indicate to PropTypes that a prop is required by appending the isRequired validator to the data type validator, as shown in Listing 6-7.

Beyond whether a prop exists and is of a particular data type, you can also do checks that are specific to how the prop data functions within React.

Validating Nodes

The node validator checks whether the prop's value is something that can be rendered. React calls anything that can be rendered in a component a node. The things that can be rendered in a component are numbers, strings, elements, and arrays containing numbers, strings, or elements:

userMessage: PropTypes.node

The node validator is useful in cases where you may not care whether the value of the prop is a string or number or element, but you do care that it can be rendered.

If one of your components does try to render a prop that isn't a node, it will cause your program to crash and display an error in the browser as well as in the console even if you're not using PropTypes. You can view this default error message by trying to render a prop value that isn't a number, string, element, or an array of renderable data. For example, the component in Listing 6-8 renders the values passed into the url and linkName props.

The following element invokes the SiteLink function component, passing in an object as the linkName:

<SiteLink url="http://example.com" linkName={{name:'Example'}}/>

Figure 6-8 shows the error message that displays when you try to render an object. Notice that the error message doesn't specify which prop caused the error, just that there was one and the element in which it occurred.

You can use PropTypes.node to find out which prop caused the error.

Listing 6-9 shows how to use PropTypes.node to validate that props.linkName can be rendered, and Figure 6-9 shows that attempting to render an object still causes the same error messages to be displayed, but PropTypes displays which prop caused the error.

In order to properly handle a case where an object value may be passed into a prop that will be rendered, you can use error boundaries, which you'll learn about in Chapter 13.

Validating React Elements

If you want to make sure that a prop is a React element, you can use PropTypes.element. You might use the element validator to test whether the children prop contains an element, as shown in Listing 6-10.

Here's an example of a use of the BorderBox element defined in Listing 6-10 that will cause the PropType.element validation to fail:

<BorderBox>
  <p>The first paragraph</p>
  <p>The second paragraph</p>
</BorderBox>

Figure 6-10 shows the warning message that will be displayed in the preceding case.

Element Type Validation

If you want to test whether the prop value is a React element type, you can use elementType, as shown in Listing 6-11.

The difference between the element validator and the elementType validator is that the element validator checks for a rendered element (for example, <MyComponent />), while the elementType validator checks for an unrendered element (for example, MyComponent).

JavaScript Class Validation

PropTypes.instanceOf tests that the supplied prop is an instance of a particular JavaScript class (meaning that it has this class in its prototype chain). To use it, you can use the instanceOf validator, as shown in Listing 6-12. The instanceOf validator uses the JavaScript instanceOf operator.

Limiting Props to Certain Values or Types

PropTypes.oneOf is a function that tests whether the value of a prop is one of the specific items in a list. To use it, pass an array of possible values into the oneOf function, as shown in Listing 6-13.

With the oneOfType validator, you can check whether the value of a prop is one of a list of data types. To use it, pass an array containing the allowed data types, using names of PropTypes's data type validators:

Component.propTypes = {
  myProp:PropTypes.oneOfType([
    PropTypes.bool,
    PropTypes.string,
    PropTypes.number
  ])
}

Additional Validators

PropTypes.arrayOf tests that the prop is an array in which each of the elements matches a provided type:

MyComponent.propTypes = {
  students: PropType.arrayOf(
    PropTypes.instanceOf(Person)
  )
}

PropTypes.objectOf tests that the prop is an object in which each of the properties of the object match a provided type:

MyComponent.propTypes = {
  scores: PropTypes.objectOf(
    PropTypes.number
  )
}

PropTypes.shape tests whether a prop value is an object containing specific properties:

MyComponent.propTypes = {
  userData: PropTypes.shape({
    id: PropTypes.number,
    fullname: PropTypes.string,
    birthdate: PropTypes.instanceOf(Date),
    isAdmin: PropTypes.bool
  })
}

PropTypes.exact performs a strict object match on the prop, meaning that it must include only the specified properties, each of which must pass its validation:

MyComponent.propTypes = {
  toDoItem: PropTypes.exact({
    description: PropTypes.string,
    isFinished: PropTypes.bool
  })
}

Creating Custom PropTypes

If what you want to validate isn't covered by any of the built-in validators, you can create your own. A custom validator is a function that will automatically receive three arguments when it's used:

• An object containing all of the props received by the component.
• The prop being tested.
• The name of the component.

In a custom prop, you can write the Error object that is returned when the validation fails.

For example, you might write a custom validator to check whether a prop is a 10-digit phone number, as shown in Listing 6-14.

Figure 6-11 shows the browser console returning the custom error message when this PropType fails.

Default Props

PropTypes can tell you when a component doesn't receive a prop or when it receives the wrong data type, but using PropTypes by itself won't fix any of the problems it reveals. To solve problems revealed by PropTypes, you often need to look at the parent component that's passing incorrect data to the component. But, ideally, each component in a React app should be able to function in some capacity without crashing your entire user interface, even if something unexpected happens in a parent component. This is where setting default values for props comes in.

For example, the StoresNearYou component in Listing 6-15 renders a Map component and a StoreList component based on location data passed into it as props.latitude and props.longitude. Many things can go wrong with geolocation, however, and it's possible that the parent component won't be able to pass this required data. The result is that the values passed to the Map and StoreList components would be invalid and could even result in the app crashing.

One way to solve this problem is by using the || (OR) operator to set fallback values for latitude and longitude, as shown in Listing 6-16.

However, this can quickly get messy and confusing in larger components involving many different props, and using inline default values like this creates duplication of effort.

The next improvement to this code might be to separate the properties in the props object into variables outside of the return statement and set the default values just once, as shown in Listing 6-17.

This is a great improvement in terms of the cleanliness of the code, but it does introduce additional variables, perhaps unnecessarily. We can do better.

React components have a defaultProps object that can be used to set values for props that aren't passed into a component. Like propTypes, defaultProps is a property of the component, rather than of an instance of the component. Therefore, to set defaultProps in a class component, you can either define it inside the component by using the static keyword, or set it outside of the component.

Listing 6-18 shows how to set defaultProps as a static property, and Listing 6-19 shows how to set it outside of the class definition.

You can set defaultProps in function components outside of the function body, as shown in Listing 6-20.

With the defaultProps property set, StoresNearYou will use the default values for props.latitude and props.longitude if it's invoked without passing props, or if it's rendered before it receives props (which can often happen in cases where a component depends on the result of an asynchronous function).

What Is state?

In a React component, state is an object containing a set of properties that may change over the lifetime of the component. Changes to the properties in the state object control the behavior and updating of the component.

Initializing state

Initializing state is the process of defining the properties of the state object and setting their initial values. The initial values are the values that will be used for the first rendering of a component.

The Difference between state and props

Props and state look similar at first glance:

• They're both JavaScript objects.
• Changes to each of them cause components to update.
• Both are data that are used by a component to generate the HTML output of the component.

The differences between props and state are in their roles.

The basic difference is that the props object is passed to a component by its parent, while state is managed within a component.

To put it another way, props is similar to a function parameter, while state is similar to a local (private) variable defined inside the function. You can pass values from the state of a parent component to a child component (where they become part of the props object), but a component cannot modify the state of its children.

Table 6-1 summarizes the similarities and differences between props and state.

Updating state

Once the initial state of a component has been set and the component has been rendered, updates to the component (and to its children, if it has any) happen when the state changes.

You might be wondering how React knows that the state object has changed. It actually doesn't. The reason that changes to state update components is that all changes to state must be done using a function provided for that purpose. This function updates the state and then triggers a re-render of the component.

The method that you use for updating a component's state depends on whether you're using a class component or a function component.

Updating a Class Component's state with setState

In class components, the setState method is the only way to modify the state once it's been initialized. You can use the setState method inside any method in a class component except the constructor.

The setState method takes an object or a function as its argument and uses this argument to schedule an update of the component's state object.

Passing an Object to setState

Listing 6-25 shows a simple example of a class component that initializes a state object and then updates it using setState each time a button is clicked.

This simple counter example demonstrates a basic usage of setState. In the increment function, I passed a new object containing a new value for the count property. If you run this component, you'll see that it works as follows:

• Clicking the button triggers the increment method in the component.
• The increment method calls the setState function, passing in a new value for this.state.count.
• Calling setState updates the value of state.count and then causes the component to re-render.
• The new value of state.count is displayed on the button.

While this simple example can be fairly easily understood, it doesn't do much to illuminate how setState actually functions. For that, we'll need a slightly more complex example with multiple properties in the state object.

Merging an Object into state with setState

Listing 6-26 simply adds another count property to the component, along with another button and another increment function.

If you run the example in Listing 6-26, you'll see that clicking each of the buttons increments the respective property in the state object. Notice, though, that each count's increment function only passes the single property that's being modified to setState and setState only updates the property passed to it.

While the previous example is not particularly thrilling, and the code could be simplified and made considerably more flexible, it demonstrates how the first way to use setState works: when you pass an object into setState, it merges that object with the existing state object.

Calls to setState are Asynchronous

When you call setState, it may not immediately update the state object. Instead, it actually just schedules, or enqueues, an update to the component's state. The reason for this behavior is that it reduces the number of unnecessary component re-renders, which improves performance of the React app.

It's helpful to think of a call to setState as a request, rather than an immediate operation.

For example, if a parent and child component both call setState in response to the same click event, this would cause two re-renders of the component if setState were to update state immediately. Because calls to setState are asynchronous, however, React will wait until both components have called setState before re-rendering.

Why Should You Care that setState Is Asynchronous?

The asynchronous nature of setState is a frequent cause of bugs or unexpected behavior in React. The problem is that if you try to use the state object immediately after calling setState, you may not get the most current state.

In Listing 6-27, I've written a method called incrementTwice that calls setState twice each time the button is clicked. To show the difference between what the expected value of this.state.count is and the new value, the component also increments and logs the value of a property named testCount.

If you didn't know that setState is asynchronous, you would think that each click of the button would increase the value of state.count by two. But, if you try out the component, you'll discover that it only increments by one. The reason is that the second call to setState happens before state.count has been updated by the first call. It therefore uses the same value of state.count that the first call used and the result is that both calls to setState change the value of state.count to the same number.

Figure 6-12 shows the result of clicking the button in the CounterClass component in Listing 6-27.

To solve this problem, you can pass a function into the setState function, rather than an object, to ensure that setState uses the most up-to-date value for the state object.

Passing a Function into setState

When you pass a function that returns an object into setState, the inner function receives the current state and props of the component and returns an updated state object. This function is called an updater function. The updater function variant of setState takes this form:

setState((state,props)=>{ return {};}

The updater function is guaranteed to receive the latest state and props. For this reason, you should always use an updater function when the new state depends on the current state.

To make it clear that the state received by the updater function is the most current state, it's a common practice to name this parameter current. In our increment function, we can use an updater function to update the value of state.count like this:

setState((current)=>{
  return {count: current.count + 1};
});

Listing 6-28 shows how the updater function solves the problem in the incrementTwice function from Listing 6-27.

Figure 6-13 shows the result of clicking the button in Listing 6-28. Notice that the testCount property is now in sync with state.count.

Updating state with Function Components

When you call the useState hook, it returns an array. The first element of the array is a stateful variable. The second element is a setter function.

To assign the state variable and the function to separate variables, use array deconstruction. For example, to create a state variable called counter and a setter function for changing the value of counter, use the following statement:

const [counter,setCounter] = useState(0);

The variable name can be any valid JavaScript variable name. The function should be the name of the state variable prefixed with “set,” although this is just a convention and not enforced by React.

Initializing and updating state in function components is considerably simpler than doing so with class components. Here are a few important things to know about using state in function components and the useState hook:

1. The value you pass into useState will be the initial value for the stateful variable.
2. Use const rather than let when creating stateful variables and setter functions.
3. Unlike setState in class components, the setter function returned by useState replaces the value of the stateful variable with the new value you pass into it, rather than merging it with the current state.
4. After updating the stateful variable, the setter function causes a re-render of the component.

Each of these four points deserves a bit more explanation, so let's take a look at them one by one.

Setting Initial State with useState

The first time a function component calls useState, the returned variable will be assigned the value you pass into useState. This parameter is optional. If you call useState without passing an initial value, the variable will be assigned a value of undefined.

The initial state can be of any JavaScript data type, but it should be of the same data type as you will be setting the variable to inside your component. For example, if you create a stateful variable called products to hold an array of products that will be loaded from an API, the initial value of products should be an empty array ([]).

If you pass a function to the useState hook, the function will be invoked and its return value will be used as the initial state.

Why Use const with useState?

It may seem wrong to use const for a stateful variable, since the whole purpose of a stateful variable is to be changed and the whole purpose of const is to prevent a variable from being changed. Nevertheless, it is recommended that you use const with useState, and it actually does make sense when you think about how functions (and therefore function components) work.

Consider the example of a stateful variable named counter and a setter function called setCounter. Calling setCounter and passing it a new value sets the value of a property in React's state object and then re-renders the component. Unlike class components, where the render method can be called and use the same properties of the class each time, a function starts its life over each time it's invoked.

When React re-renders a function component, the function calls useState again, and useState returns a new variable with the latest state value. So, the setter function doesn't actually modify the variable in the function at all—the function gets a new const each time it's invoked.

Because the whole point of a stateful variable is to trigger a re-render, the only way a stateful variable should be updated is with the setter function returned by useState.

The Setter Function Replaces the State

The function returned by the useState hook replaces the current value of the stateful variable with the value you pass into it. This makes working with stateful variables in functions simpler, but it also introduces some additional complexity, especially when working with more complex state.

State in function components is immutable. That is, you can't change it; you can only replace it with a new state. If the new state of a function component depends on the previous state, this creates some interesting problems and coding patterns—especially when the stateful variable's value is an object or array.

To set a stateful variable that's a primitive data type, simply pass the new value to the function:

setCounter(4);

If the new value depends on the previous value, you should use a function to access the previous state and return the new value:

setCounter((prevState)=>{return prevState+1});

If your stateful variable contains an object or array, you can replace the value by passing in a new object or array. But, if your new state depends on the old state, you'll need to make a copy of the existing array or object, modify it, and then pass the copy of the array into the setter function.

The copy you make of an object or array can't be just any copy. It needs to be a shallow copy. One of the easiest ways to make a shallow copy, which is widely used in React, is by using the spread operator (…).

What to Put in State

Whether you use class components or function components, changes to state data are what initiate changes to your user interface. If you think of the data in your React user interface as a river, state is the melting snow in the mountains that sets everything off.

One of the first steps in designing any React user interface is to figure out what the state of your application is. While it may not always be immediately obvious at first, as you become more comfortable with React, you'll get better at identifying the state.

As a rule, if a piece of data changes over time in response to data coming in from an external source or user input, it is likely state.

Building the Reminders App

Let's take a look at a demo application and determine what its state is, and then implement it. Before we can implement state, however, we need to take a brief detour to build the structure of the application.

Figure 6-14 shows a mockup of a user interface for a simple reminders app. The user can enter a task into the form and set a due date. The app will show a list of tasks and the user can filter tasks using a dropdown menu and mark tasks as completed.

Typically, once you've created a mockup of an app, the next step in the development of a React user interface is to figure out what components will make up the app and then make a “static” version of the app. A static version simply passes props from parents to children and doesn't have any interactivity.

Before I get started with building the app, I'll set up the development environment using Create React App. If you plan to follow along, open your terminal in VS Code and create a new project by entering the following command:

npx create-react-app reminders-app

After Create React App finishes its work, you'll see the new project in the file explorer in VS Code.

Open the src directory inside the reminders-app directory, and delete everything from there except for the following files:

• index.js
• index.css
• reportWebVitals.js

Now we're ready to get started.

From my initial evaluation of the mockup in Figure 6-14, I've determined that the Reminders app should have the following components:

• An entry form and submit button component.
• A filter select dropdown component.
• A list of reminders.
• An individual reminder component (which will be reused for each reminder in the list).

In addition to these components, there's one more component that we need to make this app complete: a container. The container component will enclose all of the other components in the app and will provide an overall structure and style to the app. The container component is frequently named App, although, as with most things in React, you're free to call it whatever you like.

Now that I've figured out what components I'll need to make, the next step is to think up names for the components and then write static versions of them.

The first component I'll make is App, and I'll include import statements and JSX elements for its subcomponents (which I have yet to make). Listing 6-29 shows a static version of the App component.

Notice that I didn't pass props into App. Since App is the top-level component, we won't be passing any props to it, so there's currently no need to specify props in the parameter list.

Once you've created the container component, the next step is to create empty files for each of the components that App imports, and to make shell components for each one. Listing 6-30 shows an example of the start of the InputForm component.

You can copy and modify this basic shell component for each of the rest of the components. Listing 6-31 shows a shell component for FilterSelect, Listing 6-32 shows one for RemindersList, and Listing 6-33 shows the one for the Reminder component.

On a simple app such as this, you can now just go through the components and start to make each one's return statement look a little bit more like what you think the final component will need to be. Don't worry about getting everything perfect. Writing React code is usually an iterative process—write some code, see what it looks like, improve it, and then write some more.

The first thing you might want to do to improve on what we have so far is to link in the Reminder component. The RemindersList component will contain all of the instances of the Reminder component, so we can import Reminder into it and also put in a couple instances of the Reminder element, as shown in Listing 6-34.

If you compile and build this app as it is so far (using a Create React App boilerplate application to provide the toolchain and basic structure), you'll see something like what's shown in Figure 6-15.

Clearly, this is far from being a full static version of the app, but it's a great start. Let's go through another round of changes and get this static app to look a bit more like the mockup. We'll also define some props and pass some fake data down to child components.

The App component can stay how it is for now. We'll add functionality and style to it eventually, but that can come later.

The InputForm component should have a text input, a date input, and a button. I'll also add in a couple of attributes for the input element and change the container element for these elements to a form element. Listing 6-35 shows the InputForm component with these improvements made.

The FilterSelect component should contain a select input with several options. I'll define these options in my second round of changes, as shown in Listing 6-36. We'll assume that the filter will be applied when the selected value changes, so there's no need to add a button to the FilterSelect component. If you recall from Chapter 3, select elements in React JSX have a value attribute that determines which option is currently selected.

The RemindersList component's purpose is to contain one Reminder element for each reminder in the list. For our static version, we can pass sample text, a due date, and a status from RemindersList to each Reminder, as shown in Listing 6-37.

The Reminder component can now accept the props data from RemindersList and display it, as shown in Listing 6-38. Because the Boolean value from props.isComplete won't display in the browser, we can convert it to a string in the JSX.

Our Reminders app still isn't pretty, as you can see in Figure 6-16, but more of the pieces are in place now and we have a foundation upon which we can start to implement the dynamic data, or state.

After you've made your static version, you can figure out what data in the app causes the app to change—what should be in the state of the app, in other words.

In the case of the Reminders app, it has the following pieces of data:

• The user's current textual input.
• The currently selected due date.
• The list of reminders.
• Individual reminders.
• The reminder status (completed or not completed).
• The selected filter.
• The filtered list of tasks.

Think for a moment about which pieces of data should or should not be state. Here's what I've come up with:

• The user's current input is certainly state, since it changes as the user types.
• The selected due date, likewise, is state.
• The list of reminders changes as new tasks are added, so it is state.
• The individual tasks within the list are unchanging, and are not state.
• The completed status of each task is state, since the user can change it.
• The selected filter is state.
• The filtered list is not state.

In the next section, I'll explain why some of these items should not be state. Oftentimes, your initial judgment about what needs to be state changes as you code your app. It's important to stay flexible and look for opportunities to reduce the size of your state object. The more data in your app can be moved out of state and into props, the simpler (and perhaps faster and more efficient) your app will be.

What Not to Put in State

Another way to think about what should be state is to follow a few rules for determining what isn't state:

• If it's passed from a parent component to a child component, it's not state.
• If it remains unchanged throughout its life, it's not state.
• If it can be computed based on other values, it's not state.

Generally speaking, individual task items should not be kept in state. My reasoning for this is that these tasks, once created, are unchanging. Also, as you'll learn, the tasks are going to be stored in the parent component and passed down to the individual task components using props.

The filtered list of tasks that displays when you select a time period from the dropdown list also should not be stored in state. This is because this list will be computed based on the due dates. Because it can be computed and displayed based on other props and state, it's not state itself.

Where to Put State

Once you've determined what is and what isn't state, the next step in the development of a React user interface is to figure out where each piece of state should be located. In other words, which component should we initialize the state inside of by either using the class-based component method of setting this.state, or by using the useState hook.

So, let's take another look at each piece of state that we identified and decide what component it should be declared in. Here's an outline of our current user interface, taken from the components created during the building of the static version:

• App
• - InputForm
• - Filter
• - RemindersList
• - Reminder

And here, once again, is the list of state items that we've identified in the app so far:

• User input.
• Selected due date.
• Reminder list.
• Reminder status.
• Selected filter.

Now, I'll go through each of these candidates for state and figure out where to put them in the component hierarchy:

• The current user input seems like it should be stored in the component that contains the form, so we'll put that in the InputForm component.
• The currently selected due date seems like it should be stored with the user input. So, we'll put that in the InputForm component as well.
• The list of reminders, logically, would seem to go into the RemindersList component.
• The isComplete status of each reminder item probably belongs inside of each Reminder component.
• The filter that is currently selected can go with the Filter component.

Now that we've put each piece of state into a component, let's look at the outline of components again, with the state values that each one contains:

<App>

- <InputForm>

    - currentInput

    - selectedDate

- <Filter>

    - selectedFilter

- <RemindersList>

    - reminders

- <Reminder>

    - isComplete

Although it seems logical, the organization of the state in our app has some serious problems that become apparent as you think about how it will actually function. Here are a few of the bigger issues:

1. In the preceding outline, each reminder keeps track of its own completed status. If we wanted the RemindersList component to only list the completed tasks, or only list the uncompleted ones, RemindersList would first need to query each Reminder and find out its status.
2. The Filter and RemindersList components are siblings. If you recall that data always flows down in a React app, you'll see a problem here. If Filter maintains its own state about which filter is currently selected, there's no way to get that information to the RemindersList component so that the correct Reminder components can be displayed.
3. InputForm is also a sibling of RemindersList. Since the goal of the user input form is to add a new item to the list of reminders, we need the current user input to be able to be passed to the RemindersList component. With these components being siblings, there's no easy way to do this.

It seems that our little Reminders app is getting pretty complicated. We'll need to figure out how the RemindersList component will query all of the Reminders for their status, we'll need to figure out how to get around this problem with passing data between sibling components, and we have all this state data spread throughout our app that we're going to need to remember and keep track of. There must be a simpler way, you say.

There is, and it's called lifting state up.

Lifting State Up

Having a lot of components that each independently maintain their own state can very quickly increase the complexity of your app, and therefore the chances of something breaking. A good rule of thumb, therefore, is that the majority of your components should be stateless pure functions.

A pure function, as you'll recall from Chapter 4, is one in which the output of the function is solely a result of the input to it. In other words, a pure function will always produce the same output when given the same input.

To turn stateful components into stateless components, React developers use a technique called “lifting state up.” This means that, instead of a component controlling its own state, you can have a component at a higher level in the hierarchy of your user interface control the state. This state can then be passed down as props to the components that need it.

Lifting state up gives you the benefit of having fewer components that can possibly cause your user interface to change, it makes your components more easily reusable, and it makes your app easier to test.

To determine where to lift your state up to, think about where each piece of state in your application is needed, and then find a parent common to all of the components that use each piece of state.

For example, in our Reminders app, the list of reminders is used by the InputForm, Filter, RemindersList, and Reminder components. The only component in our application that's a common parent to all of these is the App component. So, that's where that piece of stateful data should live.

In fact, if you look through the list of stateful variables we identified for the Reminders app, you'll discover that each one of them actually should belong to the App component, and also that some of them can be combined.

The reminders and isComplete values, for example, can be combined into a single array of objects, with each object having a reminderText property, an isComplete property, and a dueDate property:

[
  {reminderText:"do laundry",dueDate:"2022-01-01",isComplete:false},
  {reminderText:"finish chapter",dueDate: "2022-02-01",isComplete:false},
  {reminderText:"make Pizza",dueDate: "2022-03-01",isComplete:false}
]

Likewise, the currentInput and selectedDate can also be combined into an object. This has the benefit of creating exactly the right data structure for insertion into the reminder list.

Since the useState hook not only creates the stateful variable, but also creates the function for setting that variable, you can pass both of these down to the proper components as props.

With those changes done, our App component with the lifted-up state is shown in Listing 6-39.

Next, I'll receive and make use of the stateful data, which I've passed down to the subcomponents as props, and write all of the subcomponents of App as pure functions. Listing 6-40 shows the InputForm component, Listing 6-41 shows the FilterSelect component, and Listing 6-42 shows the RemindersList component.

Figure 6-17 shows what happens when you try to run the app at this point.

The reason we get this error is that we're trying to read a property of an object (userInput) that doesn't yet exist.

The solution to this problem, and to many other problems in React, is to make use of PropTypes for validating props, and defaultProps to set initial values for the props. I'll start again with the child components and work through each one and make some necessary improvements.

The InputForm component receives two props: userInput and setUserInput. The userInput prop is an object with two properties. We can use propTypes.shape to validate that the object the component receives has the correct properties and that those properties are the correct type of data. I'll also set default values that will be used for each property of userInput in case the prop is not received, as shown in Listing 6-43.

You may have a question about how the default value for the date picker is being set. The HTML date picker control accepts a string in the format 'YYYY-MM-DD'. To set its default value, I'll get the current date (by creating a new Date object) and then I'll use the JavaScript toISOString function to convert the current date to a string containing the date and time, in the format 'YYYY-MM-DDTHH:mm:ss.sssZ'. Since I only care about the date portion of this string, I'll use the substr function to get the first 10 characters of the result of the toISOString function.

Because the actual value used by the date input is a string, the correct PropType to validate it against is string rather than date.

If you run the app now (or just refresh the browser window if the development server is still running), you'll see that the reminderText error is gone, but we have a new one, as shown in Figure 6-18.

This isn't the last time you'll see this error in your dealings with React. In plain English, it's telling us that we're trying to run the Array.map function on something that's not an array.

RemindersList receives the reminders variable as a prop and uses Array.map to create an array of Reminder elements from it. Any time you use Array.map in a component, you have to be certain that the component won't try to render before the array that Array.map is used on is populated. If it does try to render before the array is received, the render will fail with an error, as you saw in Figure 6-18. Using a default prop value is one way to eliminate the possibility of this type of failure. Listing 6-44 shows the RemindersList component with default props and propTypes defined.

Another way to prevent map from trying to run on a prop that's not yet an array is to set the initial value of the stateful variable in App to an empty array, like this:

  const [reminders,setReminders] = useState([]);

However, if you set the initial value of reminders to an empty array, the default "No Reminders Yet" reminder doesn't show up. If you remove the empty square brackets passed into the useState function that creates the reminders variable, the default props defined in RemindersList will render, as shown in Figure 6-19.

About the key Prop

Any time you make a list of components, as we do in the RemindersList component, each element in the list must have a prop named key. The value of key must be unique to each item in the list. Since the index position of an element in an array is a unique value, this makes a convenient value for the key prop.

The key prop is used by React to help facilitate updating of items in the list. The value of key is not available as part of the props object inside the component. You'll notice that RemindersList passes the same value (the index position of the reminder in the array) to both the key prop and to a prop called id. This is necessary so we can make use of this value to update the reminders list, as you'll see when we start coding the functionality of the app.

Now let's look at the FilterSelect component. FilterSelect also receives two props: selectedFilter and setSelectedFilter. I'll set selectedFilter to all by default and validate the types for both, as shown in Listing 6-45.

The Reminder component receives three props: reminderText, dueDate, and isComplete. There shouldn't be a possibility of Reminder not receiving props, because its parent component, RemindersList, has default props set. But, it's always a good idea to set defaults and validate your props using PropTypes, because it makes your component more reusable and independent. Listing 6-46 shows the Reminder component with propTypes and default props set.

Now that we have state and props being passed down through the components and default values set for the props, the initial render of the app is starting to take shape and there shouldn't be any PropType warnings in the JavaScript console (although you will see a couple of other warnings), as you can see in Figure 6-20.

The warnings that you see in the console now are expected, and they point to the one big thing left to do before this is a somewhat functional app: we need to implement event listeners that will trigger state changes.

Since we're building this app entirely with function components, we already created the functions that will set the state variables. All we need to do now is pass those functions down to the correct component and then set up event listeners to call the functions.

I'll start with the userInput object and its setter function, setUserInput. The setUserInput function is already passed to the InputForm component. What we want to happen is for it to be called and to store the reminder text and date when the text field and date field change.

It's common to define an intermediary function between the event handler and the setter function. Often, this function will take the name of the event that triggers it, prefaced by handle. In the InputForm component, we'll define a function called handleTextChange, one called handleDateChange, and one called handleClick. The purpose of handleTextChange and handleDateChange is to get the data from the field's change event into the correct form to be stored in state and then to call the setUserInput function. The purpose of handleClick will be to use the current values from the userInput object to add a new element to the reminders array each time the button is clicked.

Recall that the setter functions created by the useState hook replace the value of the stateful variable, rather than updating it like setState does. As a result, each time we call setUserInput, we need to re-create the userInput object, but with the new value. This is easily done by using the spread operator. The handleTextChange function in InputForm looks like this:

const handleTextChange = (e)=>{
  const newUserInput = {…props.userInput,reminderText:e.target.value}
  props.setUserInput(newUserInput);
}

The handleDateChange function is very similar, but it requires the date to be massaged into the correct format:

const handleDateChange = (e)=>{
  const date = new Date(e.target.value);
  const formattedDate = date.toISOString().substr(0,10);
  const newUserInput = {…props.userInput,dueDate:formattedDate};
  props.setUserInput(newUserInput);
}

Because we've done all of the hard work of creating the userInput object as the user was typing it, adding a new reminder to the reminders array when the button is clicked is just a matter of adding the new object along with an isComplete property.

We'll write a function to update the reminders list. To avoid having to pass the reminders array down to the InputForm component unnecessarily, we'll instead define a function in App and then pass that down to InputForm.

Here's the addNewReminder function to add to App:

const addNewReminder = (itemToAdd) => {
  setReminders([…reminders,itemToAdd]);
}

Add a new attribute to the InputForm element to pass addNewReminder down to the InputForm component:

<InputForm userInput={userInput} 
           setUserInput={setUserInput} 
           addNewReminder={addNewReminder}/>

And, of course, don't forget to validate the PropType for setUserInput inside InputForm:

InputForm.propTypes = {
  userInput: PropTypes.shape({
    reminderText: PropTypes.string,
    dueDate: PropTypes.string
  }),
  setUserInput: PropTypes.func,
  addNewReminder: PropTypes.func
}

Now, inside of InputForm, we can define a handleClick function that will call the addNewReminder function when the button is clicked. HTML buttons have a default action, which is to submit a form and reload the page. We need to prevent this default action so that we don't reload the page (and React) every time the button is clicked (thus losing the state):

const handleClick = (e)=>{
  e.preventDefault();

  const itemToAdd = {…props.userInput,isComplete:false};
  props.addNewReminder(itemToAdd);
};

To invoke these new functions, add event listener attributes to the form elements. Event listener attributes in React work like HTML event listener attributes. When the specified event happens on the element containing the attribute, the function specified will be run.

The value of an event listener attribute can be the name of a function (or a prop with a function value), or an arrow function definition. Here's the reminderText input element with the event listener function specified:

<input value={props.userInput.reminderText} 
       id="reminderText" 
       type="text" 
       placeholder="What do you want to do?" 
       onChange={handleTextChange}/>

Here's the dueDate input with its event listener attribute:

<input value={props.userInput.dueDate}
       id="dueDate"
       type="date" 
       onChange={handleDateChange}/>

And here's the button with its event listener attribute:

<button onClick={handleClick}>Add Item</button>

At this point, the code for the InputForm component should look like Listing 6-47.

With these three event listeners set to trigger our event handler functions, you should be able to start up Create React App's development server (using npm start). When you try to add a new reminder, however, you'll get a new error: TypeError: reminders is not iterable. This indicates that we're trying to use the spread operator on reminders before it's an array. And, in fact, that's what's happening in the addNewReminder function.

As with the solution to the error we got when we tried to use the Array.map function on reminders before it was populated, the solution here is to add a default value. You could set the initial value of reminders to an empty array, or you could use a third method and test the value of reminders inside of addNewReminders and take the appropriate action. Here's what that looks like:

const addNewReminder = (itemToAdd) => {
  if (reminders===undefined){
    setReminders([itemToAdd]);
  } else {
    setReminders([…reminders,itemToAdd]);
  }
}

With that done, now you'll be able to add new reminders to the list, as shown in Figure 6-21.

Filtering the Reminders

The FilterSelect component uses a dropdown menu containing various time frames to calculate a filtered list of the reminders. To figure out how to code the functionality of this component, let's step through the basic process of filtering the list:

1. The user changes the selected item in the select input.
2. The change to the select input causes a function to be called.
3. The called function receives the full list of reminders and the selected filter.
4. A subset of the full reminders list is created.
5. The subset of the list is displayed.

The default filter in our app is "all", which displays all of the reminders. Since there's no way to shut off the filter selector, what is displayed in the app should always be a filtered list (even if the filtered list contains all of the reminders). So, the first step in programming the filter functionality is to create a new variable for the filtered list and pass that down to the RemindersList component instead of the full list of reminders.

For now, I'll do this by just copying the reminders list into a new array called filteredReminders in App (using the spread operator) and then passing down this new filteredReminders array as the value of the reminders attribute in RemindersList, as shown in Listing 6-48.

Once again, the spread operator will produce an error unless you give reminders a default value or do a test before trying to use Array.map on reminders. I'll use the ternary operator this time to check whether reminders is defined. If it is, I'll copy the elements from reminders into filteredList. If it isn't, I'll set filteredList to undefined.

Remember, because the filteredList is calculated, it doesn't need to be state. The selectedFilter, on the other hand, is changed as a result of a user interaction, so it does need to be state.

At this point, the app will function exactly the same as before, but the groundwork is properly laid to be able to filter the list. The next step is to write a function that will filter the reminders list based on the date. For that, we can use Array.filter. Array.filter takes a function as its argument, and creates a new array containing all of the elements that pass a test in the function.

Listing 6-49 shows the function that I came up with for filtering the list.

If you examine this function, you'll see that it first checks whether the selected filter is "all", and just exits out of the rest of the function if so. If the selected filter isn't "all", it converts the selected filter into a number of days. Then it uses Array.filter to go through each element in the reminders array and make a list of the reminders that have a due date earlier than the current time (which is in the number of milliseconds since the beginning of UNIX time) plus the number of milliseconds in the selected filter.

To implement this function, place it outside of the return statement in the App component, and then call it, passing in reminders and selectedFilter, as shown in Listing 6-50.

The next thing we need to do is to add the event listener and handler to the FilterSelect component so that selecting a filter from the dropdown will update the selectedFilter state variable.

In the FilterSelect component, I'll define a new function called handleChange, which will pass the value of the select input to the setSelectedFilter component. Then, I'll set an onChange event handler on the select input to call handleChange. The FilterSelect component, with this event listener and event handler specified, is shown in Listing 6-51.

Implementing the isComplete Changing Functionality

The last thing left to do for now is to implement the isComplete status changing functionality. This should just be a checkbox to the right of each reminder that, when clicked, will indicate that the item is complete.

The first thing to do is to implement the checkbox in the Reminder component. Checkboxes don't have a value property. Instead, they have a property called checked which is either true or false. Our checkbox in the Reminder component should look like this:

<input type="checkbox" checked={props.isComplete} onChange={handleChange}/>

The full Reminder component should now look like Listing 6-52.

Next, we can define the handleChange function, which will call a function called setIsComplete that we'll pass down via props. The handleChange function will pass the index of the current reminder in the array (which we're passing down as the id prop) and the opposite of the current isComplete (so, if isComplete is true, false will be passed to the setIsComplete function):

function handleChange(){
  props.setIsComplete(!props.isComplete,props.id);
}

Next, we have to define the setIsComplete function. Remember that isComplete is a property inside the reminders array. Since the reminders array lives in the App component, we'll define the setIsComplete function there as well. This function will simply change the isComplete property of the element in the array matching the index passed to it. Here's how that's done, using the “sandwich” method (two slices and spread):

function setIsComplete(isComplete,index){
  const newReminders = [ …reminders.slice(0, index),
                        {…reminders[index],isComplete}, 
                         …reminders.slice(index+1) ];
  setReminders(newReminders);
}

To get the setStatus function down to the Reminders component, you'll need to pass it first to the RemindersList component, like this:

<RemindersList reminders={filteredList} setIsComplete={setIsComplete}/>

And then you'll need to pass it from the RemindersList component down to the Reminder component, like this:

<Reminder reminderText={reminder.reminderText} 
          dueDate={reminder.dueDate}
          isComplete={reminder.isComplete} 
          setIsComplete={props.setIsComplete}
          id={index}
          key={index}/>

When you run the app and add a couple of reminders, you can now check and uncheck each one's status checkbox independently of the others, as shown in Figure 6-22.

Writing Inline Event Handlers

An inline event handler is an anonymous function that's written as the value of an event listener attribute. Inline event handlers are often used as wrappers for calling another function that's defined outside of the return statement. They may also be used for performing simple tasks that perhaps don't warrant the creation of a full event handler function.

Listing 7-5 shows an example of an inline event handler.

It's possible to call multiple functions or execute a block of code from inside an inline event handler, but there are several reasons for not using inline event handlers for complex code:

1. Inline event handlers aren't reusable.
2. Inline event handlers can be difficult to read and they reduce the organization of your code.
3. Inline event handlers are re-created every time the component re-renders. In function components, this is what happens to all inner functions. But, in class components, inline event handlers may affect performance, although the effect is not likely to be noticeable, and prematurely optimizing your code for this kind of problem before you have it will cause you more problems (in terms of time wasted alone) than it solves.

Inline event handlers are often also used when the result of some user interaction should be simply to update the state in some way. In a class component, this means that setState is called, or in a function component, when the state setter function is called. Listing 7-6 shows an example of using an inline event handler to call setState.

Writing Event Handlers in Function Components

An event handler inside a function component is written as an inner function, using either arrow syntax or the function keyword.

If you're comfortable with the class method of writing components, you can think of function components as being the render method from a class component. The event handlers in a function component only exist for a single render, unlike in class components where they're methods of the class and persist between renders.

Function components don't have the this keyword, and so there's no need to bind event handlers declared inside of functions.

Writing functions inside of function components is as simple as writing a function anywhere else. Once you've written an event handler function, you can assign it to a particular event listener by passing the name of the function as the value of an event listener attribute, as shown in Listing 7-7.

Writing Event Handlers in Class Components

Event handlers in class components are methods of the class. They're written outside of the render method and must be bound to the specific instance of the class.

Listing 7-8 shows one way to write and bind an event handler method in a class component.

Binding Event Handler Functions

To be useful, event handler functions need to be passed as values to React's built-in components that support event listener attributes. For example, the built-in input element represents an input component that can receive an onChange event handler prop and will call an associated callback function when it receives a change event.

Because event handler functions are passed to child components via props, they need to be bound to the context in which they were created so that the value of this will refer to the parent component in which the event handler was defined.

Only class components have a this keyword, so binding only applies in class components. Plus, as you'll see, binding only applies in class components to methods defined using function or method definition syntax.

Passing Data to Event Handlers

Event handlers often need to receive data from within the render method. Most commonly, event handlers need access to the Event object so they can make use of its properties to get form field values, mouse position, and the other properties that you saw in Table 7-1.

If you specify your event handler using just the name of the event handler function, the good news is that there's nothing more to do. The Event object is passed to the event handler function automatically, as demonstrated in Listing 7-13.

If you use an anonymous arrow function to call your event handler, you do need to specifically pass the Event object into the event handler, as shown in Listing 7-14.

Updating a Controlled Input

Unless your goal is to create an input that can't be edited, a controlled input must also have an event listener attribute and an event handler function. Even though the internal state of the input element in Listing 8-2 doesn't change when you type into it, it still fires a change event with every keystroke. Using the onChange event listener, you can detect this event and use the target.value property of the Event object to update the state property, which can then be assigned to the value attribute of the input.

The process for controlling a controlled input is the same in function and class components, but the JavaScript code you need to write in each differs somewhat.

Controlling an Input in a Function Component

Listing 8-3 shows a controlled text input that updates using one-way data flow in a function component.

When you run this component in a browser, typing into the input updates the value of the emailAddress state variable, which is used as the value of the input and is also output in the paragraph below the input. The input behaves like a normal HTML input, but the component also has access to the value of the input.

Controlling an Input in a Class Component

In a class component, controlling an input works the same way, but the JavaScript is slightly different and a bit more verbose because of the need to write and bind the event handler and to correctly address the state property.

Listing 8-4 shows the same controlled input as Listing 8-3, but written as a class component.

The class component in Listing 8-4 can be written a bit more succinctly by using arrow functions, an inline event handler, and by creating state as a class property, as shown in Listing 8-5.

Controlling the Input Element

With the exception of the input types that create buttons, and the special case of the file input type, the way to get the value of a controlled input element in React is by using the onChange attribute.

The button inputs (submit, reset, and button) use the onClick attribute. The button element, which does the same thing as an input with a type of button, also uses the onClick attribute.

The file input, which allows you to choose a file from your computer to upload to the browser, is a read-only input. In React, an input with the type of file is always uncontrolled.

Controlling a textarea

In HTML, a textarea element's value is its children, as shown in Listing 8-10.

In React, a textarea is written more like an input element: as an empty element (meaning it doesn't have an end tag or content) with a value attribute. You can use the onChange event listener to handle input into a textarea in React, as shown in Listing 8-11.

Controlling a Select Element

A select element in HTML creates a dropdown list, with any number of option element children forming the items in the dropdown list. In HTML, each option element has a Boolean attribute named selected, which determines the current value of the select element, as shown in Listing 8-12.

In React, the select element has a value attribute that determines which option is currently selected, and the onChange attribute on the select input can be used to detect and handle changes to the currently selected option, as shown in Listing 8-13.

Managing Focus

Properly managing focus, especially in a web form, is an important part of web user interface usability and accessibility.

The most basic use case for managing focus is shown in Listing 9-3. The same technique is also commonly used to automatically place the cursor into the first field in a login form when it loads.

Another common use for managing focus is to return a user to the same field they were editing before a modal window was opened or after they save their input into a form and return to it at a later time.

Automatically Selecting Text

Selecting text in a child element can be useful for making components that display text and provide a button for copying the text. This is often done in applications that generate some kind of a code or key. Listing 9-6 shows an example of a text input with a button for copying the contents.

This example also demonstrates how to display a temporary notification in a React component. After you copy the code, the component updates a state variable called message to display a success message. This state change triggers the componentDidUpdate lifecycle hook, which uses JavaScript's setTimeout method to wait three seconds and then set message back to an empty string, thus removing the success message.

Figure 9-2 shows the value of the text input selected and the success message that displays right after you click the button.

Controlling Media Playback

HTML's audio and video elements can be controlled using several DOM methods, including play, pause, and load. You can attach refs to media elements to use these methods, as shown in Listing 9-7.

Setting Scroll Position

The DOM window.scrollTo method takes coordinates in a document (specified as x and y pixel values) and scrolls the window to those coordinates. One way to use this is to find out the position of a certain element in a document (using the offsetTop property) and then scroll the window to that element.

This can be useful for navigating long documents, or for remembering a user's position between sessions.

Listing 9-8 demonstrates how to use a ref to get the position of an element and then scroll to that element. Previous examples have used class components, so I'll use a function component for this one.

JavaScript Style Syntax

The properties that you can access and manipulate using JavaScript mirror the CSS properties, and you can do anything using JavaScript styles that you can do with CSS. Because of the differences between JavaScript and CSS, however, JavaScript styles are written differently.

The first difference is that a CSS rule-set does not follow the rules of JavaScript object literals, although it does resemble one. In particular, CSS style rules don't have quotes around the values, while in JavaScript style objects, quotes are required around strings.

The second difference between CSS rule-sets and JavaScript objects is that the individual rules in CSS are separated by semicolons, while in JavaScript objects, properties are separated by commas.

The third difference is that CSS property names containing more than one word have hyphens between the words. In JavaScript, this would result in an error, so JavaScript style properties use camelCase for multi-word names.

Finally, CSS has the concept of selectors, which is how styles can be selectively applied to only certain elements. A rule-set attached to a class selector (which is indicated by a . before the name of the rule-set) will apply to elements that have that class (or className in JSX).

In JavaScript, style objects that aren't inline styles must be assigned to a variable and that variable can be used as the value of a DOM element's style attribute.

Listing 10-5 shows a CSS rule-set, followed by the JavaScript style object that accomplishes the same thing.

Why to Use Inline Styles

Inline styles make it easy to see how a component will be styled. If you're only applying a couple of style properties to an element, and you're not going to reuse that particular combination of properties in another component, writing them as inline styles is easy and fast. Using inline styles also increases the portability of a component, since the styles are part of the component file and don't rely on an external module being present.

Why Not to Use Inline Styles

In a React application with many different components, using inline styles can become a maintenance nightmare. It's simply a good user interface design practice to reuse certain styles, including how headings are styled, colors and sizes of buttons, sizes and typefaces of different types of text, and so forth.

If you were to write the same style object, containing the same style properties, each time you styled a block of text, you'd soon come to the realization that writing inline style objects is a waste of effort. At that point, logically, the thing to do is to create variables to store your style objects.

Improving Inline Styles with Style Modules

Rather than writing your style objects directly in the style attribute of each element, you can create variables to hold the styles, as shown in Listing 10-6.

Variables created to hold style objects can be kept inside the component, as shown in Listing 10-6, or you can put them into separate files and export them using either named exports (if you want to create a style library containing the styles for multiple components) or a default export.

Listing 10-7 shows an example of a style object library containing styles for multiple different components.

Ignoring how ugly these styles will actually look in reality, they could be saved in a file called messageStyles.js and then imported individually or as a group into each component that needs to display a message.

Listing 10-8 shows how to import an entire style object library into a component that will display text in a different style, depending on the type of message passed into the component.

Naming CSS Module Files

Although CSS module files resemble ordinary CSS files, when you use them inside of Create React App, their filenames must end with .module.css to indicate to the compiler that they need to be processed as CSS modules.

The standard naming convention for CSS module files is to lowercase and hyphenate the component name that the module will be used in, and then follow that with .module.css.

So, if your React component is named NavBar, the CSS module file for the NavBar component would be named nav-bar.module.css. You can import the styles contained in the CSS module file using any name you want, but it's normal to import them as an object named styles, like this:

import styles from './nav-bar.module.css';

Because each component can import its own styles object, you can write the CSS for any component without having to worry that a class name you use for one component's styles will interfere with a style having the same name in another component.

The styles inside a CSS module file should use camelCase so that when you use them inside your JSX, you can access them using dot notation.

Advanced CSS Modules Functionality

CSS module files can be just plain CSS, but they also have some additional capabilities that can make them more powerful than plain old CSS.

:global .header1 {
  font-size: 2rem;
  font-weight: bold;
}

Managing State with useState

On the first render of a function component containing it, the useState hook creates a stateful value from the argument passed to it, along with the function for updating it. After the first render, useState returns its most recent value after updates are applied. Like class properties (such as this.state), values created with useState persist between renders.

As with all of the hooks, the first step in using useState is to import it:

import {useState} from 'react';

Once you import useState into a component, you can use it as many times as you need to create stateful variables. React keeps track of stateful values in a function component based on the order in which they appear in the code, which is how it can return the latest value for each stateful variable each time the function renders. This is why hooks can't be used inside of conditional or looping code—doing so would cause the hooks in a function component to not always be called, or to not be called in the same order with each render, which would cause React to return unexpected values.

Listing 11-1 shows a simple example of using useState to keep track of the score and the current guess in a number guessing game.

In the preceding example, the user's guess is updated using an inline event handler in the onChange event listener when the user enters a number into the number input field.

When the button is clicked, the checkNumber function generates a random number between 1 and 10 and then compares that number with the latest value stored in the guess stateful variable.

One important thing to notice with the comparison is that I used the Number function to convert guess to a number. This is necessary because even numeric values from <input> elements are stored in the browser as strings. The random number variable is of the number data type, however, so to be able to do a strict comparison between them, one of them has to be converted.

If the two numbers match, the score variable is updated to its current value plus 1.

const [mailingList,setMailingList] = useState(()=>{
  const initialMailingList = loadMailingList(props);
  return initialMailingList;
});

Using the Setter Function

Like the setState function in a class component, the setter function returned by useState will trigger a render. If you pass a setter function down to a child component and call it from that child component, it will still operate on the original variable it was created with, as demonstrated by Listing 11-2.

Figure 11-2 shows the result of rendering the ButtonContainer component and clicking the button (which is rendered by the MyButton child component).

The setter function returned by useState can be used in two different ways: by passing it a function or by passing it a single value.

const [guess,setGuess] = useState(''); // guess === ''
setGuess('7'); // guess === '7'
setGuess('3'); // guess === '3'

const [score,setScore] = useState(0); // score === 0
setScore((prevScore)=>prevScore+1); // score === 1

Hooking into the Lifecycle with useEffect

The useEffect hook accepts a function, which it will run after each render of the function component by default. The useEffect hook can be used to simulate the componentDidMount(), componentDidUpdate(), and componentWillUnmount() lifecycle methods in function components.

The purpose of useEffect is to allow you to run imperative code that may have side effects inside a function component. These side effects are the types of things that aren't otherwise allowed in function components, such as network requests, setting timers, and manipulating the DOM directly. The reason these types of operations aren't otherwise possible in function components is that function components are essentially just the render method of a component. Side effects shouldn't be done in the render method, even in class components, because the render method is likely to overwrite the results of any side effects. Instead, side effects should be performed after the render method has run and the DOM has been updated.

This is why side effects are handled inside of lifecycle methods, such as constructor(), componentDidMount(), and componentDidUpdate() in class components.

Customizing useEffect

There are times when you don't want to run an effect on every render, but instead only on the initial render, or only when a specific value changes. To customize the behavior of useEffect, you can pass it an optional second argument. The second argument is an array of values that the effect depends on.

For example, Listing 11-4 shows a component that starts a timer and uses the default useEffect behavior. With the default useEffect behavior, this timer is re-created each time the component renders.

Since this component doesn't use state or accept any props, there's no reason for it to re-render, so the timer will continue to increment and log a higher number each second for as long as the component is mounted in the browser window.

If this component were to re-render, however, the default behavior of useEffect would cause the cleanup function to run and a new timer to be created with each render, as shown in Listing 11-5.

Each time you click the button in the preceding example component, the state changes and the return value changes, which causes the component to render, which causes a new timer to start, as shown in Figure 11-3.

But what if you want to create a game that runs a timer to test how quickly you can click the button? One way to do this would be to only start the timer after the component first mounts, rather than after every render. The way to do this with useEffect is to pass it an empty array as the second argument, as shown in Listing 11-6.

With the effect only running when the component mounts, the render caused by incrementing the count variable no longer creates a new timer, as shown in Figure 11-4.

Passing an empty array as the second argument of useEffect causes it to simulate the behavior of the componentDidMount() lifecycle method, and makes it a good place to put fetch requests for data that won't change during the life of the component, for example. The empty dependency array works because the dependency array's job is to say, “run the function when one of these values has changed.” If there are no values in the dependency array, the effect only runs when it's first created.

But, what if you wanted to change the game so that the timer could be restarted when the user wants, or when the count gets up to a certain number, for example? What you need is to conditionally run useEffect. To do this, you can make useEffect depend on one or more values that will determine when it runs, as shown in Listing 11-7.

When the component in Listing 11-7 mounts, the timer will start, and it will only be restarted when the value of gameNumber changes.

Even when the benefits and results of conditionally running an effect aren't as apparent as those in Listing 11-7, specifying the dependencies of an effect can often be a way to increase the performance of your user interface by eliminating unnecessary renders of components, as you'll see in the next section.

Running Asynchronous Code with useEffect

Because useEffect is asynchronous and runs after the component has rendered, it's the ideal place to perform asynchronous tasks such as fetching data. Listing 11-8 shows a postal code lookup component that uses an effect hook to look up the U.S. city and state whenever the ZIP code entered into an input field changes.

The result of running the component in Listing 11-8 is shown in Figure 11-5.

This example uses a number of the techniques that you've learned about in the last couple of chapters, plus a couple of new ones, so let's take a walk through the code step by step:

1. On its initial render, the zipcode, city, and state variables are set to empty strings. The useEffect hook runs, but the conditional statement that checks whether zipcode has a value that evaluates to a Boolean true prevents the inner function, loadAddress(), from being created or running.
2. The user can enter text into an uncontrolled input. Because the input is uncontrolled, it doesn't cause the UI to render and useEffect doesn't run. If this input were controlled, the effect would run on each keystroke because the value of zipcode would be changing.
3. When the user clicks the button, the zipcode state variable is set by the updateZip() function.
4. The change to the zipcode variable causes a render. Because zipcode is listed as a dependency for the useEffect hook, the effect runs.
5. This time, zipcode has a value that evaluates to true, so the inner function is created and then runs.
6. The loadAddress() function is an async function. Using the async keyword before the function definition allows the function to use the await statement to perform asynchronous tasks. In the case of this function, it will call the fetch command and then wait for a response. When a response is received, the json() command reads the response into an object named data.
7. The data from the API is used to set the values of the city and state stateful variables. This causes another render of the component. The zipcode hasn't changed, so the useEffect hook won't run.

This component illustrates how to use effect dependencies to eliminate unnecessary renders, which are one of the most common types of performance problems in React components. It's possible that this component would still function without the dependency array, but it would make many unnecessary API requests, which would slow down your component (at the least) and possibly cost you money if the API charges you for requests.

Subscribing to Global Data with useContext

Global data is data that's used by all or many components in a program, such as a theme or user preferences. It can be a hassle to have to pass global data from parent components to child components for every component in an React app—especially when your component tree has multiple levels.

React Context provides a way to share global data between components without having to manually pass values as props. The useContext hook accepts a Context object as its argument and returns the most recent value of that object.

One example of global data that can be passed to child components using Context is a style theme. A theme refers to styles that are used by multiple components to give them a common look within an app.

Listing 11-9 shows an example of using the useContext hook in the child component to subscribe to a Context object.

Combining Logic and State with useReducer

The useReducer hook is an alternative to useState that's useful for complex state updates or situations where the new state depends on the previous state. Whereas useState takes just an initial state as its argument, useReducer takes an initial state and a reducer as its arguments. A reducer is a pure function that takes the current state and an object called an action and returns the new state. In other words, here's the signature of a reducer function:

(state, action) => newState

The useReducer hook returns a value and a dispatch function. A dispatch function can be used in response to events, but instead of taking a value to set the stateful variable to, it takes an action object. An action object has a type and an optional payload.

Using reducers is quite a bit more complicated than simple state updates, but once you see some examples, they become much clearer. Listing 11-10 shows our old friend the Counter component, but rewritten to use a reducer.

In Listing 11-10, the action only has a type property. But, if you wanted to have a more advanced counter, you could add a payload that could be used to indicate how much to increment or decrement the counter by, as shown in Listing 11-11.

Memoized Callbacks with useCallback

Functions that you define in components are normally re-created with each render. This is not usually a problem. However, sometimes you do need to (or should for performance reasons) return a memoized version of a function to keep it available between renderings. This is where useCallback comes in.

Listing 11-12 shows the most common use case for useCallback. In this example, the useEffect hook should call a function passed into it (which we call a callback function) when the value of the phoneNumber variable changes. The useEffect hook has two dependencies—the function and the variable.

Because callback functions are re-created on each render, the effect in this example will still call its internal function each time the component renders.

If you try to run the preceding component using Create React App, you'll get a warning in the console, as shown in Figure 11-6.

When you type into the input field, you'll see that the placeCall() function is called each time the component renders, which happens every time you type a character.

As the warning message tells you, there are two solutions to this problem. The first is to just define the placeCall() function inside of the useEffect hook and then remove it from the dependencies list, like this:

useEffect(() => {
  const placeCall = () => {
    if(phoneNumber){
      console.log(`dialing ${phoneNumber}`);
    }
  };
 
  placeCall(phoneNumber);
 
  },[phoneNumber]);

The other solution, which is the correct one if you're going to use the placeCall() function in more than one place, is to memoize the callback function using useCallback, like this:

  const placeCall = useCallback(() => {
    if(phoneNumber){
      console.log(`dialing ${phoneNumber}`);
    }
  },[phoneNumber]);

The useCallback hook creates a persistent version of the function that will only be re-created when the phoneNumber variable changes. With this change, the useEffect hook will behave the way you want it to—only calling the inner function when the value of phoneNumber changes—as shown in Listing 11-13.

Caching Computed Values with useMemo

The useMemo hook memoizes (caches) values between renderings of a function component. It works the same way as useCallback, except that it can cache any value type, not just functions.

As with useCallback, there are two reason to use useMemo:

• To solve problems with unnecessary renders.
• To solve performance problems related to computationally expensive calculations.

Solving Unnecessary Renders

I covered the first case already in the “Memoized Callbacks with useCallback” section. The issue comes up when you have an object, array, or function serve as a dependency for a function that should only be run when its dependencies change.

In JavaScript, when you create two objects (or functions, or arrays) with exactly the same properties, the two objects are not equal to each other. You can test this by opening your browser's JavaScript console and executing the following expressions:

{} === {}
[] === [] 
() => {} === () => {}

In each case, the result will be false, as shown in Figure 11-7.

Because of this, using an object, array, or function in a dependency array will result in the function running on every render of the function component. Just as useCallback is the solution for callback functions, useMemo is the solution to unnecessary renders due to object or array dependencies.

Accessing Children Imperatively with useRef

The useRef hook returns a ref object with a mutable property named current. One use for a ref object is to imperatively access the DOM. When a DOM node that a ref is attached to changes, the ref object's current property is updated. Changes to a ref do not cause the component to re-render.

Listing 11-15 shows a component that uses a ref to get the value of an uncontrolled <textarea> in order to count the number of words in it.

Customizing Exposed Values with useImperativeHandle

The useImperativeHandle hook lets you create a “handle” or custom name for a value exposed to a parent component using a ref. This is useful when using React.forwardRef to forward a ref attribute from one component to its child.

For example, in Listing 11-16, a component called CountingBox is created that contains a <textarea>. The ref attribute passed into the CountingBox component will be forwarded and attached to the <textarea>. The useImperativeHandle hook is then used to make a new property of the ref.current object (called count in this case) available to the parent component.

The useImperativeHandle hook is the least important hook to fully understand. In most cases, anything you want to do using useImperativeHandle can be better done by passing props from parent components to child components.

Updating the DOM Synchronously with useLayoutEffect

The useLayoutEffect hook is identical to useEffect in every way, except in when and how it executes. Whereas useEffect runs its functions asynchronously (that is, without blocking anything else) after the component appears in the browser, useLayoutEffect runs its function before the DOM is painted to the browser, and it runs synchronously.

The useLayoutEffect hook can be used in cases where an effect results in changes to the DOM and where the useEffect hook may cause flicker or inconsistent display of the results.

use-http

The useFetch hook that's part of the use-http package (https://use-http.com) makes isomorphic HTTP requests. What this means is that it can be used both on the server and in the browser. It features caching, TypeScript support, automatic aborting of pending requests when a component unmounts, React Native, GraphQL, and retrying.

react-fetch-hook

React Fetch Hook's useFetch hook (https://www.npmjs.com/package/react-fetch-hook ) takes a URL and a response formatter function as parameters and returns a Boolean named isLoading and formatted data. In its most basic form, using this hook looks like this:

const {isLoading,data} = useFetch("http://example-url.com/api/users/1");

axios-hooks

The useAxios hook (https://www.npmjs.com/package/axios-hooks) executes HTTP requests using the popular Axios library. It takes a URL and an options object as parameters and returns an object containing data, the loading status, and any error message that was returned by the URL. It also returns a function that you can use to manually execute the HTTP request.

Listing 11-20 shows a simple example of using the useAxios hook.

react-hook-form

React Hook Form's useForm hook makes building forms and validating data input simple. The useForm hook returns a function called register() that you can pass as a ref to uncontrolled inputs with name attributes. The handleSubmit() method returned by useForm will then handle all of the data from your form.

You can pass options to each register() function to validate fields, make them required, and specify other limits such as minimum and maximum values.

Listing 11-21 shows a basic use of useForm.

@rehooks/local-storage

The useLocalStorage hook, which is part of the Rehooks library (https://github.com/rehooks), provides functions for working with the browser's local storage. Browser local storage is useful for storing data between browser sessions. This is helpful for creating offline apps, for increasing the performance of a web app, and for remembering the user's state between sessions.

Another feature of useLocalStorage is that it can sync data between browser tabs.

use-local-storage-state

The useLocalStorageState hook (https://www.npmjs.com/package/use-local-storage-state) takes a key and an optional default value and returns an array with three values: a value, a setter function, and a Boolean named isPersistent. Here's an example:

const [reminders, setReminders, isPersistent] =
useLocalState('reminders',['sleep','eat food']);

The first two return values work the same as the values returned by useState. The third tells you whether the value is stored in memory or in local storage. By default, of course, any value you create using useLocalStorageState will be stored in localStorage. In the event that localStorage isn't available for some reason, useLocalStorageState will fall back to just keeping the value in memory.

Other Fun Hooks

Going beyond the basic tasks that are used in most modern user interfaces, other custom hooks encapsulate functionality that's more specialized or even just for fun. Here are a few custom hooks that fall into this category:

• The useGeolocation hook (https://github.com/streamich/react-use) tracks a user's geographic location.
• The useNetworkStatus hook (https://github.com/rehooks/network-status) returns information about a user's current network status.
• The useKonomiCode hook (https://stackblitz.com/edit/use-konami-code) is an easter egg hook for detecting when a user has entered the famous Konomi Code (↑ ↑ ↓ ↓ ← → ← → B A), which is used as a cheat code in many video games.

Lists of Hooks

Finding custom hooks for just about any purpose is becoming easier thanks to some great lists of hooks being maintained and updated by the React community. Here are a few of the lists of hooks that are currently available:

• Hooks.guide (https://hooks-guide.netlify.app/). A curated and categorized list of hooks.
• Collection of React Hooks (https://nikgraf.github.io/react-hooks/). A searchable collection of hooks that anyone can add to.
• Use Hooks (https://use-hooks.org/). Provides a tool for scaffolding React hooks and a list of hooks created using the scaffolding.

Installing and Importing react-router-dom

React Router isn't installed with Create React App by default, so you'll need to install it before you can start using it. Once you have a React application built with Create React App, you can install react-router-dom using npm by entering the following command into the terminal:

npm install react-router-dom@5.3.0

Once react-router-dom is installed, you can import components, functions, and hooks from the library into any of your components that will use routing. For most uses of React Router, you'll need three parts:

• A router component.
• A linking component.
• A route component.

The Router Component

A router component is the top-level component that makes routing possible. It handles the changing of the window.location property and it provides React Router props to components below it.

import {BrowserRouter as Router} from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
  document.getElementById('root')
);

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router} from 'react-router-dom';
 
ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App/>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

Linking to Routes

React Router has three different linking components:

• Link
• NavLink
• Redirect

The first two linking components are essentially wrappers around the HTML a element with some additional features and capabilities added. The Redirect component changes the current URL without user interaction.

Internal Linking with Link

Because React Router overrides the default behavior of links in a browser, you can't simply link between routes using the a element as you normally would in a website. The Link element is the basic linking element in React Router. All it requires is a path to link to, which can be provided using the to attribute, and a single child node, as in the following example:

<Link to="/user/login">Log in</Link>

The value of the to attribute can be a string (or an expression that evaluates to a string) or an object. If the to property is specified as an object, the properties of the object are concatenated to create the destination location.

Linking with a String

If you pass a string to the to attribute, it can be any valid internal path that you would normally use as the value of the href attribute with the HTML a element. Any path that you pass to the Link component will be used to update the browser location relative to the path of the app. Because using Link updates the URL relative to the app, the following example won't work as you might expect:

<Link to="https://chrisminnick.com">Link to my website</Link>

Figure 12-4 shows what happens in the address bar when you click the preceding link in a React Router app.

If you want to link to an external site from a React app, just use the a element.

Linking with an Object

To use an object as the value of the to attribute, specify a combination of the allowed properties:

• pathname: A string containing the path to link to.
• search: A string containing query parameters (the question mark followed by the name=value pairs that form an HTML querystring).
• hash: A string containing the hash symbol (#) followed by any values you want to provide to the destination route in the hash portion of the URL.
• state: An object containing state that you want to persist in the destination location.

For example, the following Link component, when followed, will pass a path and querystring to the destination Route component:

<Link to={{path: '/orders, search: '?filterBy=new'}}>
    View New Orders
</Link>

Additional Link Props

The Link component can receive several optional props. These include replace, component, and pass-through props, which are discussed next.

replace

Normally, when a Link element is clicked, React Router adds a new location entry to the browser history stack. If you want to return to the route you were previously at, you can use the browser back button or change the browser's position in the history stack. The replace attribute replaces the current entry in the history stack rather than adding a new one:

<Link to="/somepath" replace>Go to the new location</Link>

component

The component attribute takes a custom navigation component as its value. You can use the component attribute to supply the name of the component you'd like to use in place of the default Link component. To create a custom navigation component that you want to use for the link and pass the prop from the Link component through to it, do this:

const SpecialLink = (props)=>(
  <a {…props}>***Super Special Link*** {props.children}</a>
);
 
<Link to="/somepath" component={SpecialLink}>Click the special link</Link>

pass-through props

If you want to attach additional props to the a element that results from the Link, you can specify them as well. Examples include className, id, and title.

Internal Navigation with NavLink

Navigation links are a subset of internal links within an app. They're used for changing modes, tabs, or pages within a web application. Examples of navigation links include the links in a navigation bar or mobile site navigation menu.

Navigation links function the same as any other link in a web application, but it's good user interface design to indicate which link is currently active, as shown in Figure 12-5.

React Router's NavLink component creates navigation links. The difference between a NavLink and a Link component is that the NavLink has attributes that allow it to be styled when the value of its to attribute matches the browser's current location.

You can style a NavLink component using either the activeClassName attribute, which accepts a CSS class name, or the activeStyle attribute, which accepts a style object:

<NavLink to="/home" activeClassName="active">Home</NavLink>

Depending on how your app is designed, there are options to consider when deciding when a NavLink will display in its “active” style. For example, in the navigation menu shown in Figure 12-6, should the “Home” and “About Us” menus be highlighted when the “Meet the Team” sub-menu link is active?

Listing 12-2 shows the JSX used to build the navigation menu in Figure 12-6.

By default, NavLink will apply the active style when part of the path matches. In the preceding example, when the Team link is active, the active style will be applied to not only the Team link, but also to the aboutUs and Home links, as shown in Figure 12-7.

If you only want to activate the active style when there's an exact match, you use the Boolean exact attribute, as shown in Listing 12-3.

Figure 12-8 shows the resulting navigation bar after the exact attribute has been added to each of the NavLink components.

If you need an even more strict matching of paths, the strict attribute can be used with NavLink components to also take into account the trailing slash in a URL path:

<li><NavLink strict to="/aboutUs" activeClassName="active">About Us</NavLink>

In the preceding link, the active style will be applied if the location is /aboutUs, but not if it's /aboutUs/.

{loginSuccess?<Redirect to="/members"/>:<Redirect to="/forgotPassword"/>}

<Redirect push to="/pageNotFound"/>

Creating Routes

The Route component is the one that actually creates routes. In its simplest form, Route takes an attribute named path, which it compares with the current location. If there's a match, Route will render its children:

<Route path="/login">
  <LoginForm/>
</Route>

By default, the path only needs to match part of the location. For example, if the current browser location is /login, the component in Listing 12-4 will render both the Home component and the Login component.

Figure 12-9 shows what the resulting page might look like when the location is /login, with the Home and Login components both displaying.

The ability to match and display multiple routes means that you can compose pages and create sub-navigation with React Router.

Restricting Path Matching

You can use the exact attribute with Route to restrict path matching to exact matches. Figure 12-10 shows the result of adding exact to both of the Route s from the previous example and visiting the /login path.

If you want to enforce the ending slash in path matching, use the strict attribute:

<Route strict path="/user/">
  <UserProfile/>
</Route>

/user/5455

Behind the Scenes: location, history, and match

Routing depends on and uses three related objects: the history object, the location object, and the match object. By manipulating or reading values from these objects, you can gain greater control over how routing works in your app.

The match Object

The match object contains information about how a Route's path matches the URL. Just as with the location and history objects, you can access the match object in several different ways:

• Inside a Route component.
• By using the withRouter higher-order component.
• By using a hook.

The match object contains the following properties:

• params: An object containing the key/value pairs passed from the URL, which correspond to dynamic parts of the URL. For example, if the route's path is /user/:id, id will be in the params property.
• isExact: A Boolean that's true if the entire URL matches, with no characters after it.
• path: The pattern that was used to make the match.
• url: The matched portion of the URL.

The match object is useful for dynamically constructing links and routes in nested routes, as shown in Listing 12-16.

This sub-navigation menu contains Link elements that use the URL from the match object as the base for the to attribute. To match these new links, Route components use the path from the match object as the base for their own path attribute values.

Figure 12-12 shows the result of rendering Listing 12-16 and clicking the Reports link.

useHistory

To use the useHistory hook, assign the return value of the useHistory hook to a new variable. The properties and methods of the history object then become available through the new object:

const history = useHistory();

useLocation

The useLocation hook works the same way as the useHistory hook. Create a new object from the returned value of useLocation to gain access to the properties of the location object:

const location = useLocation();

useParams

The useParams hook returns an object containing key/value pairs for each of the current Route 's params. You can deconstruct the object to use individual params:

const {orderNumber,size,color} = useParams();

useRouteMatch

The useRouteMatch hook attempts to match the current URL in the same way that a Route component would, but without rendering anything. For example, if you have the following Route with a render prop:

<Route
  path="/order/:orderId"
  render={({ match }) => {
    
    return <> {match.path}</>;
  }}
/>

you could gain access to the same match object without rendering anything like this:

let match = useRouteMatch("/order/:orderId");

The useRouteMatch hook can be used with a single argument, which is the path to match against, or it can be used without an argument, in which case it will return the match object of the current Route.

Building Your Own ErrorBoundary Component

One way to get an ErrorBoundary component is to build your own. Listing 13-1 shows a simple example of an ErrorBoundary, which just uses static getDerivedStateFromError to show a fallback UI when an error occurs.

To understand what's happening in this ErrorBoundary component, you need to know a couple of things about the getDerivedStateFromErrors lifecycle method.

  static getDerivedStateFromError(error) {
    return { hasError: true,
             error
           };  
  }

render() {
 
  if (this.state.hasError) {
    return <h1>Oops! There's been an error.</h1>;   
  }
 
  return this.props.children; 
}

Testing Your Boundary

Once you've created your ErrorBoundary component, you can test it out by wrapping it around a component that you know will produce an error that can be caught. Listing 13-2 contains a component that would normally produce an error, because it tries to return an object in the render method, which isn't allowed.

Attempting to render this component without an error boundary will result in an error message and/or a blank screen.

To prevent this kind of error (short of fixing the actual component, of course) you can wrap the BadComponent component in an error boundary in its parent's render method, or you can export it with the ErrorBoundary around it, as shown in Listing 13-3.

With the error boundary around the component with the error, the fallback UI will now render, as shown in Figure 13-5.

Using a Logging Service

Logging errors to the console is fine during development, but once your app is out in the wild and being used by other people, all of those log messages that show up in the console window stay in the user's console window and don't do anyone any good.

To find out what errors are happening for real users, either they need to tell you about them (which is unlikely unless the error is very bad) or you need to implement a system that logs errors outside of the user's browser automatically.

A cloud-based logging service can capture events (such as errors) that happen in your application and provide you with reports that you can use to improve your app or to gain information about how people are using it.

One such service is Loggly (https://loggly.com). Loggly has a free trial that you can use for testing out the following example code.

After you've signed up for Loggly's trial, you'll need to install the Loggly Software Development Kit (SDK). You can do this by entering the following at the root of your app:

npm install loggly-jslogger

Once the Loggly SDK is installed, create a new component, Logger, that will provide the Loggly SDK's functionality to other components (such as your error boundary). Listing 13-5 shows what your Logger component should contain.

To get the customer token, log in to your Loggly trial account and go to the Source Browser, as shown in Figure 13-7.

Find the Customer Tokens link (shown in Figure 13-8) and click it to view the token you'll need to enter into the Logger component.

The last step in installing Loggly and configuring it to log errors in your React UI is to import it into ErrorBoundary and pass the parameters of ComponentDidCatch to it, as shown in Listing 13-6.

Now that the ErrorBoundary is logging caught errors to Loggly, you can go to your Loggly dashboard and see information about caught errors that happen, as shown in Figure 13-9.

Installing a Pre-Built ErrorBoundary Component

The other way to get an ErrorBoundary component is to install one that someone has already built, such as the one at https://www.npmjs.com/package/react-error-boundary.

To install react-error-boundary, enter the following into your terminal:

npm install react-error-boundary

The react-error-boundary package provides a configurable ErrorBoundary component that you can use instead of writing your own. To use it, import it into your component and wrap it around components that you want to catch errors in. React-error-boundary is highly customizable, but the most basic use of it simply requires a fallback component that should be displayed when an error occurs, as shown in Listing 13-9.

Catching Errors in Error Boundaries with try/catch

One way to catch the errors that error boundaries can't, is to use JavaScript's built-in try/catch syntax.

For example, an error boundary can't catch an error in itself, only in its child components. Theoretically, you could wrap your ErrorBoundary in an ErrorBoundary, but that's a never-ending task. It's better to use try/catch in the ErrorBoundary component, as shown in Listing 13-10.

In this example, if something goes wrong with calling logger.push, that error can be handled by the code in the catch block.

Catching Errors in Event Handlers with react-error-boundary

Event handlers in React don't happen during the rendering, unlike the lifecycle methods and the render method. Because of this, errors in event handlers don't have the potential to cause the collapse of the entire UI, and so event boundaries aren't needed or supported in event handlers.

However, rather than writing separate error handling code for your event handlers and your error boundary, it would be ideal to be able to handle both the same way.

If you use the react-error-boundary package, it includes a hook named useErrorHandler that you can use to hand off errors that happen in an event handler to the nearest ErrorBoundary component, as shown in Listing 13-11.

In this example, when an error happens in the handleSubmit method, it will be handled by the ErrorBoundary that encloses the Greeting component (or one of its ancestors).

Running the build Script

When you're ready to deploy your app (or any time you want to try it out, really) you can create a production version of your app by going into the terminal and typing npm run build .

What happens next will be that Create React App will go through a similar process to what it does when you run npm start, except that instead of opening the compiled app in a browser, it will save the compiled files in a directory named build.

Examining the build Directory

Figure 14-1 shows the files in the resulting build directory after running npm run build in the React Bookstore project from Chapter 5.

If you compare the build directory with the rest of the project, you'll notice the following:

• The contents of the public directory become the root of the build directory. The images and data directories, along with the favicon.ico, index.html, and the manifest.json files, have all been copied over to build.
• A new static directory has been created. This directory contains a css subfolder and a js subfolder.
• A new asset-manifest.json file has been created.

The Built index.html

If you open the index.html from the public directory and the index.html from the build directory, you'll see that the one in the build directory is minified, comments have been removed, template code (marked by % characters) has been replaced, and links to scripts and CSS have been inserted. If you look hard enough, however, you'll notice your root node, where the React app will run, is still in there, as shown in Figure 14-2.

This built index.html is the file that a web browser will load that will kick off the React app and display your root component (and its children) in the root node.

The index.html file uses absolute paths to load linked files. So, if you open index.html in a web browser now, you'll see error messages in the console that the JavaScript and CSS files weren't found.

If you change all of the absolute paths in index.html to relative ones (by putting a . before the path) you can actually run the built app locally on your computer without a web server, as shown in Figure 14-3.

In the case of the React Bookstore, however, loading the app locally produces two errors in the console due to browser requirements for loading the app's data. Namely, for the fetch command to be able to load data.json, the app must be viewed using HTTP or HTTPS.

What's in a Name?

The filenames generated by Create React App include unique strings between the original name of the file and the file extension, as you can see here:

/static/js/main.ee531687.chunk.js

This string of seeming random letters and numbers is actually a hash string. A hash string is a string of text calculated based on the contents of the file. As a result of the build process inserting hash strings into the filenames, whenever you change your React components and rebuild your app, the built filenames will change. This enables your application's files to be cached by servers and browsers and automatically updated when you modify the app.

Files may also be split into multiple “chunks” to optimize downloading and loading of the files. This is done automatically during the build process.

Web Server Hosting

The easiest way to publish a React app on the web is to upload the contents of the build directory to any HTTP server, such as Apache or NGINX. Publishing a React app in this way is not much different from publishing any static website built using HTML, CSS, and JavaScript.

If you sign up with any standard web host that allows FTP upload or upload of files using a browser-based file browser, the steps for publishing your app to the web will be similar to the following:

1. Create or find out your FTP login credentials, or find out if your web host has a web-based file uploader.
2. Use FTP (or the web-based file uploader) to connect to your site and upload everything inside the build directory to your web directory (which should be named something like www or htdocs).
3. Test that your app works and that you uploaded it correctly by navigating to the root of your website (for example, www.example.com) in a web browser.

For a simple app that doesn't use routing, the preceding process will work. If your app does use routing, you'll need to do an additional configuration to redirect any requests for subdirectories of the site back to index.html so they can be properly handled by React Router.

For an Apache server, create a file named .htaccess containing the following code:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Add this file to your public directory, and then upload it from the build directory with the rest of your app.

Node Hosting

If your web server has Node.js installed, you can deploy your React app by installing the serve package and running it.

Run the following command to install serve globally:

npm install -g serve

To start up serve and use it to serve a particular React app, run the following command in the root of your project:

serve -s build

The server will start up and your site will become available at your web server's domain name at port 5000. If you wish to modify the port, you can do so by using -listen (or -l for short) in the serve build command, like so:

serve -s build -l 5050

Deploying with Netlify

Modern web apps are increasingly being hosted on cloud and backend as a service (BaaS) platforms that offer one-step deployment and continuous integration and continuous deployment (CI/CD). CI/CD means that when you commit changes to a version control system, those changes can be pushed to your live production environment automatically.