Event Handling and Re-Rendering the DOM: JavaScript vs React

Learning event handling and re-rendering the DOM first in JavaScript and then in React has been an eye-opening experience and I wanted to do the exact same code in both languages to illustrate the pluses and minuses of each.

React accomplishes a lot of what JavaScript does under the hood and it can seem like a much more seamless experience, but it’s important to compare the two and not drink the React Kool-Aid too quickly. Don’t forget that React is JavaScript at the end of the day.

I’m going to walk through the exact same classic loop of

CLICK BUTTON → FETCH DATA → SET DATA → RENDER

first in JavaScript and then in React to be able to compare the two processes side-by-side. Let’s break it down.

Event Handling in JavaScript

In the JavaScript version, we first need to use a querySelector to target the button by class.

const button = document.querySelector('#show-ramen-button')

Once we have the button, we then add the event listener which in this case is a click event and add the getAndRenderRamen callback function.

button.addEventListener('click', getAndRenderRamen)

Next, we need to implement the fetch request to fetch and set the ramenData.

const getRamens = () => {
  //fetches some JSON and returns a promise
};
const getAndRenderRamen = () => {
  getRamens().then((ramenData) => {
  //we’ll revisit renderThumbnail later in the discussion
  ramenData.forEach((ramen) => renderThumbnail(ramen));
  });
};

Event Handling in React

In React, the same process is quite similar, but I find it to me more intuitive and less clunky. This time we can add the onClick event right to the JSX button element, no need for targeting with the querySelector. We have the handleClick callback function right in this same line of code as well. This process took two lines of code in JavaScript.

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

Next we declare the ramen state.

const [ramens, setRamens] = useState([])

This next part is fairly similar to the JavaScript way. We need to fetch the ramenData and set it in state. However, setting the ramen state is significantly different in the React version as we don’t have to deal with state in vanilla JavaScript.

const getRamens = () => {
  //fetches some JSON and returns a promise
}
const handleClick = () => {
  getRamens().then((ramenData) => {
    setRamens(ramenData)
  });
}

Re-Rendering the DOM in JavaScript

This next part is a real strike against the vanilla JavaScript route. As you can see, it involves many lines of code and is extremely finicky. First create an image element, give it a class, set the image src, and give it an id using a dataset. Finally, you can append the whole image tag to the DOM.

const renderThumbnail = (ramen) => {
  const imgTag = document.createElement('img');
  imgTag.className = `thumbnail-${ramen.id}`
  imgTag.src = ramen.image;
  imgTag.dataset.id = ramen.id;
  thumbnailDiv.append(imgTag);
 };

Re-Rendering the DOM in React

Here in the React re-rendering version, we map over the ramens state, returning the Thumbnail component each time. The key take-away is that there is no need to append or explicitly call any render logic. This happens automatically as it reacts to state change. This is a clear benefit for using React.

const ramenThumbnails = ramens.map((ramen) => {
 return <Thumbnail className = `thumbnail-${ramen.id}` key=    {ramen.id} image={ramen.image}/>
})
return (
  <div> {ramenThumbnails} </div>
)

Hopefully, this comparison was illustrative of the pros and cons of event handling and rendering in JavaScript and React. From my perspective, the event handling part is fairly similar with no clear winner. The part where React really shines though is in re-rendering based on state. Thanks for reading!