What is the secret to the lightning speed at which this tag is being appended to the DOM?

Question

What is the secret to the lightning speed at which this tag is being appended to the DOM?

Have a look at this concise sandbox that mirrors the code provided below:

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  let [tag, setTag] = useState(null);

  function changeTagState() {
    setTag(<div>I am a div</div>); //className="new"
    let divTag = window.document.querySelector(`div`);
    divTag.style.setProperty("color", "red");
  }

  return (
    <>
      <div onClick={changeTagState}>Click to change tag state</div>
      {tag}
      {/* <div onClick={alterTag}>Alter tag</div> */}
    </>
  );
}

Why does the variable divTag not return null? How is it possible for it to access and apply styles to divTag?

This is what I expected to occur in the changeTagState function:

setTag is executed.
It then attempts to assign a value to divTag by utilizing querySelector.
Once changeTagState completes, the entire component runs again. Only then is the new value of tag added to the DOM.

javascript html css reactjs

Answer 1

Answer №1

Your interpretation is accurate, but there is a crucial detail that is often overlooked: the <div> being selected by querySelector is actually the root element, not the <div> in the setTag function. To illustrate this point further, consider what happens when you log it:

function App() {
  let [tag, setTag] = React.useState(null);

  function changeTagState() {
    setTag(<div>I am a div</div>);
    let divTag = window.document.querySelector(`div`);
    console.log(divTag);
    divTag.style.setProperty("color", "red");
  }

  return (
    <React.Fragment>
      <div onClick={changeTagState}>Click to change tag state</div>
      {tag}
      {/* <div onClick={alterTag}>Alter tag</div> */}
    </React.Fragment>
  );
}
ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>

If you were to attempt using a more specific selector that only applies to the newly created div, it would indeed result in returning null:

function App() {
  let [tag, setTag] = React.useState(null);

  function changeTagState() {
    setTag(<div className='the-dynamic-div'>I am a div</div>);
    let divTag = window.document.querySelector(`.the-dynamic-div`);
    divTag.style.setProperty("color", "red");
  }

  return (
    <React.Fragment>
      <div onClick={changeTagState}>Click to change tag state</div>
      {tag}
      {/* <div onClick={alterTag}>Alter tag</div> */}
    </React.Fragment>
  );
}
ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>

Answer 2

Your interpretation is accurate, but there is a crucial detail that is often overlooked: the <div> being selected by querySelector is actually the root element, not the <div> in the setTag function. To illustrate this point further, consider what happens when you log it:

function App() {
  let [tag, setTag] = React.useState(null);

  function changeTagState() {
    setTag(<div>I am a div</div>);
    let divTag = window.document.querySelector(`div`);
    console.log(divTag);
    divTag.style.setProperty("color", "red");
  }

  return (
    <React.Fragment>
      <div onClick={changeTagState}>Click to change tag state</div>
      {tag}
      {/* <div onClick={alterTag}>Alter tag</div> */}
    </React.Fragment>
  );
}
ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>

If you were to attempt using a more specific selector that only applies to the newly created div, it would indeed result in returning null:

function App() {
  let [tag, setTag] = React.useState(null);

  function changeTagState() {
    setTag(<div className='the-dynamic-div'>I am a div</div>);
    let divTag = window.document.querySelector(`.the-dynamic-div`);
    divTag.style.setProperty("color", "red");
  }

  return (
    <React.Fragment>
      <div onClick={changeTagState}>Click to change tag state</div>
      {tag}
      {/* <div onClick={alterTag}>Alter tag</div> */}
    </React.Fragment>
  );
}
ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>

What is the secret to the lightning speed at which this tag is being appended to the DOM?

Answer №1

Similar questions

Utilizing JavaScript/jQuery to activate a Bootstrap navbar post-page load

Determining the height of a component in React Native

Incorporating external JavaScript files into a React Element

Using jQuery to close a DIV with a delay

Ensuring that jQuery(document).ready(function() contains the appropriate content

Unable to modify a record using the 'findById' method and save() function while utilizing promises

Applying a Webkit Scroll Bar to a specific element on the webpage

Problem with selecting odd and even div elements

Runtime.UnhandledPromiseRejection - Oops! Looks like we're trying to read properties of something that doesn't exist (specifically 'headers')

Can the state be determined by the presence of other objects in the state?

Creating a responsive design that adapts to various image sizes

Tips for Testing an Ajax jQuery Function Within the document.ready Event

Encoding a JSON representation of an HTML list where all children are displayed at each parent item

Avoid reactivating focus when dismissing a pop-up menu triggered by hovering over it

Is it necessary for an embedded YouTube video to automatically play with sound?

The compatibility between MUI Autocomplete and react-hook-form is limited and may not function properly

Unraveling the Mystery of jQuery AJAX Response: Where Have I Gone Astray?

Divide a JSON dataset into two distinct JSON files and incorporate them within the code

Selenium is unable to locate certain elements due to the JavaScript page not being fully loaded, causing issues with implicit and explicit wait functions

Differences in outcomes have been observed between the elementLocated and findElements functions