DOM and DOM Tree

Sajak Shrestha — Fri, 24 Jan 2025 16:31:32 +0000

Hey, you know what DOM is? Let's begin from the full form of the DOM. Actually DOM stand for Document Object Model. Where Document is the HTML content of our webpage. Wait, firstly lets know that where is DOM actually used. DOM is used to manipulate the Document or the HTML. Did you just asked why? Let's understand Why.

We know that HTML is the static application. But how is the data being updated in website if HTML is static? Here comes the DOM which connects the static HTML application to the Javascript in order to make the application dynamic. Now let's break the DOM in three different pieces.

Document
Document is the HTML content of our application which contains the element and their attributes
Object
Object is the Javascript object that contains the value and the attribute of the element
Model
Model is the hierarchical tree structure of the HTML document.

HTML

<head>
    <Title>DOM</Title>
</head>
<body>
    <h1>Learning DOM</h1>
    <p>We are learning DOM and DOM tree</p>
</body>

DOM

{
    document: {
        body: {
            h1: "Learning DOM"
            p: "We are learrning DOM and DOM tree"
        }
    }
}

As we can see on the above image, DOM is the programmatic representation of the HTML document structured as a Javascript Object So, DOM is exactly identical to the HTML page.

Then, What is the DOM tree? Let's discuss about it.

As we can see the above Image is representing the HTML elements on the tree like structure using root and node. This is the actual DOM tree. So, According to the Document Object Model every HTML element is the object and the hierarchical structure of the nodes, where each HTML element is represented as node is the DOM Tree.

useMemo in ReactJs

Sajak Shrestha — Tue, 21 Jan 2025 14:37:01 +0000

At the very starting after listening useMemo what come in mind at first is, what is useMemo? So, useMemo is the hook in react that helps on memoizating the computed value or the return result of the function. It is used for the optimization of the react component. Ok optimization, let's discuss how useMemo is helping in optimization. As we know react rerenders the component after the change in state. Because of which many unnecessary function or other operations that are heavy which are not linked to the state may execute too.

import { useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const [item, setItem] = useState(1);

  let changingCount = count + 1;
  console.log("UpdatedCount:", changingCount);

  return (
    <>
      <div>State: {count}</div>
      <div>Item: {item}</div>
      <button onClick={() => setItem(item + 1)}>Increase Item</button>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
    </>
  );
};

export default App;

As we can see in the snippet above, my application is being rerender after I am clicking the button. Let's focus on the point console.log in application. My console is executing every time I am clicking any button. Wait, but my console is depending on my state "count". What can I do so that I can execute my console only when my "count" state is updating. Yeah, exactly we can use useMemo hook for that. Let's use it now.

import { useMemo, useState } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const [item, setItem] = useState(1);

  useMemo(() => {
    let changingCount = count + 1;
    console.log("UpdatedCount:", changingCount);
  }, [count]);



  return (
    <>
      <div>State: {count}</div>
      <div>Item: {item}</div>
      <button onClick={() => setItem(item + 1)}>Increase Item</button>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
    </>
  );
};

export default App;

What benefit did we get by using useMemo hook. So, as you can see here useMemo has two dependencies first one is a callback function and the second one is the dependency array. Now my function or the console is only executing when my count state is being updated which means the function is now dependent on the state. Wow, is my application being optimized? Yes of course we tackle the unnecessary computation of our application.

Callback function and dependency array as parameter. It should be right? Yeah it sounds similar to the useEffect but understand both have their own usage where useEffect is used for handling sideEffects in reacts. Wait wait, what is sideEffect? SideEffect is the interaction of the application with the external substance like api fetching and using events. Where useMemo is used to tackle the unnecessary computations.

DEV Community: Sajak Shrestha

DOM and DOM Tree

HTML

DOM

useMemo in ReactJs