React and the DOM

When changing the state, our intended effect may involve using some of the methods and processes we learned about earlier when we first talked about the DOM and events . Let’s take a closer look at changing state with an application in manufacturing.

We are at a shoe factory and the mechanism responsible for counting how many shoes come off the line is broken. The factory manager doesn’t want to stop production and cause unnecessary delays so they have asked you to sit by the machine and manually count the shoes coming down the line. With your React skills, you can quickly code an application that contains a single button and displays the current shoe count.

  1. Create a new React application using Vite.

  2. Make a new components directory within src.

  3. Make a new file called ShoeButton.jsx.

  4. Add the following code to that file.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

    import { useState } from 'react';

export default function ShoeButton() {
   const [shoeCount, setShoeCount] = useState(0);

   const handleClick = () => {
      setShoeCount(shoeCount+1);
   }

   return (
      <div>
         <h1>{shoeCount} shoes have come down the line!</h1>
         <button onClick={handleClick}>Add a shoe!</button>
      </div>
   );
}

  5. Add a call to your ShoeButton component inside of App.jsx.

Warning

You may need to remove some of the boilerplate code from the App.jsx file that comes along with creating a new React application using Vite.

  1. Run the application and start hitting the button to update the state!

This is an example of a counter button, which is one of the simplest ways to update the state of a component. You may have noticed that as you click the button, the page doesn’t reload, but the component still re-renders. Here is what is happening:

  1. When you click the button, the call to setShoeCount inside handleClick() updates the value of the state variable, shoeCount.
  2. This call ensures that the change in state is recognized and that component re-rendering is triggered.
  3. React’s Virtual DOM then updates the <h1> element to display the new shoe count.
  4. React compares the real DOM to the Virtual DOM and finds that the real DOM has the old shoe count displayed and the virtual DOM has the new shoe count displayed.
  5. Reconciliation occurs and the real DOM is updated to display the new count.
  6. Now the component is re-rendered and you can hit the button again!

In this code, handleClick() is our event handler for the onClick event. We previously learned about onClick in DOM and Events . In React, we use event handlers to trigger changes in state based on users’ actions. You may have noticed that we are able to write web applications that perform similar actions as the ones we learned about previously with much less code.

When we first learned about event handlers, we created a small application that would update some HTML when a button was clicked.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
   <head>
      <title>Button click handler</title>
      <script>
         function youRang() {
            document.getElementById("main-text").innerHTML += "you rang...";
            console.log("you rang...");
         }
      </script>
   </head>
   <body>
      <h1>Ring the Doorbell!</h1>
      <p id="main-text"></p>
      <button onclick="youRang();">Ring Bell</button>
   </body>
</html>

With React, we can simplify our code and still accomplish the same task.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import { useState } from 'react';

export default function Doorbell() {
   const[bell, setBell] = useState("");

   const handleClick = () => {
      setBell(bell += "you rang...");
   }

   return(
      <div>
         <h1>Ring the Doorbell!</h1>
         <p>{bell}</p>
         <button onclick="handleClick">Ring Bell</button>
      </div>
   );
}
Note

Typically, event handlers in React applications are named using the following convention: “handle” + name of event. Hence, the event handler for handling the event of clicking on the button is “handleClick”. You will also see names like “handleSubmit” or “handleChange”.