Vanilla JavaScript vs React

Here is the same Like button written twice, first with plain browser JavaScript and then with React. Plain JavaScript without any library is often called vanilla JavaScript. Both versions show "0 likes" at first, and each click on the button adds one.

The Vanilla JavaScript Version

The page starts with this HTML:

<p id="likes">0 likes</p>
<button id="like">Like</button>

The script finds both elements, keeps the count in a variable and, on every click, writes the new text into the paragraph:

let likes = 0;
const likesText = document.getElementById('likes');
const likeButton = document.getElementById('like');

likeButton.addEventListener('click', () => {
  likes = likes + 1;
  likesText.textContent = likes === 1 ? '1 like' : `${likes} likes`;
});

After two clicks, the paragraph reads as follows:

start:          0 likes
after 1 click:  1 like
after 2 clicks: 2 likes

Notice that the code has two separate jobs. It changes the variable, and then it changes the page. If you later show the count in a second place, such as a badge at the top of the page, you must find that element too and add another line to the click handler. Forgetting that line leaves the badge showing the old number.

The React Version

The React version describes what the screen should show for any value of likes. It uses two features that later chapters explain in detail. The HTML-like markup inside the function is JSX, the subject of the next chapter, and useState is a function that lets a component remember a value between clicks, which the State chapter covers.

import { useState } from 'react';

function LikeButton() {
  const [likes, setLikes] = useState(0);

  return (
    <>
      <p>{likes === 1 ? '1 like' : `${likes} likes`}</p>
      <button onClick={() => setLikes(likes + 1)}>Like</button>
    </>
  );
}

There is no getElementById and no textContent here. The click handler only changes the data by calling setLikes. React then runs LikeButton again, receives a new description of the screen, compares it with the previous one, and updates the page.

To see what React actually changes, the component was rendered and clicked twice, with a MutationObserver (a browser feature that reports every change made to the DOM) watching the page. This is the trimmed log:

start:   <p>0 likes</p><button>Like</button>
click 1: change to text node "1 like"
         <p>1 like</p><button>Like</button>
click 2: change to text node "2 likes"
         <p>2 likes</p><button>Like</button>

React did not rebuild the paragraph or the button. The same two elements stayed on the page, and only the text node inside the paragraph changed, which is exactly what the vanilla version did by hand. The diagram below places the two click paths next to each other; look at who writes to the page in each one.