Questions tagged [virtual-dom]

Use virtual-dom for questions related to an object model which mimics the structure of and intercepts events normally handled by the real document object model (DOM).

The virtual-dom applies of the technique of double buffering to the DOM. It is used for many purposes, including:

  • security: sandboxing DOM mutation
  • performance: minimization of repaints and reflows
  • testing: performing static analysis on the rendered tree

References

215 questions
1
vote
0 answers

How to access virtual DOM methods from react library?

I want to develop an extension which stores DOM changes for every second. I am planning to use react virtual DOM for converting DOM into JS object and comparing two DOM states. I cant find any API for doing so. is there any way I can access react…
1
vote
0 answers

React optimize render for large object of array

I have a large list of array that has about 10,000 lists and I want to minimize the rendering of object to the current list. There are several solutions that I have found like react-window or react-virtualized to render only the visible components…
Rajesh Paudel
  • 1,117
  • 8
  • 19
1
vote
1 answer

using useRef or createRef

I want to set the const [solution, setSolution] = useState(0); with the value of a input element by pressing a button I get the same result using createRef or using the useRef hook reading What's the difference between useRef and createRef? gives…
seeman
  • 105
  • 1
  • 13
1
vote
1 answer

How to get specific value from Promise Result Object in getBoundingClientRect?

Here is part of my code returning a Promise, I am using getBoundingClientRect Async because it runs in AMP virtual DOM (amp-script): JS: button.addEventListener("mouseenter", function(event){ let target = event.target; let…
1
vote
1 answer

Is there is a way to fire mouseover event in amp-script (javascript)?

There are some examples of using Javascript and Web Workers in AMP Documentation. https://amp.dev/documentation/components/amp-script/?format=websites#script-hash For example, I have a function that appends H1 after button click fired: JS: const…
1
vote
2 answers

How is React able to only update single part of the real DOM tree?

How is React's Virtual DOM able to only render a certain part of the DOM & keep the rest of the tree? Not sure if I'm correct, but if I change content of a Div in a normal HTML file, I would have to refresh the page to see the changes, right?…
1
vote
1 answer

How is Virtual DOM updated?

Imagine that you've built an application with ReactJs containing a hundred elements. Let's say that in some time, the state of component A changes, and for the sake of simplicity we assume it has only one element and no child component. My question…
Hans
  • 2,674
  • 4
  • 25
  • 48
1
vote
0 answers

What's the relationship between snabdom, hyperscript and Vue 2?

I'm trying to understand Vue with more depth and have done some reading about Vue 2's virtual DOM implementation and came across the mentions of snabdom and hyperscript. My understanding is that Vue 2 uses a fork of snabdom to implement its virtual…
Mysterywood
  • 1,378
  • 2
  • 10
  • 19
1
vote
1 answer

Styling root () element in VueJs Nuxt

I have this vue component that displays a full size image after being created when a user clicks an image on a carousel. When this is open, the user should not be able to scroll the page. Currently the way I've implemented this is by directly…
niekh1234
  • 11
  • 1
  • 1
1
vote
1 answer

How does React VDOM save unnecessary DOM manipulation?

I have searched quite a lot for understanding this, but I am unable to find the answer. Please do share a link or any study material related. For reference let’s look at two pieces of code. document.getElementById("btn").addEventListener("click",…
Mamoon Ahmed
  • 113
  • 10
1
vote
2 answers

When we use JSX
, or React.createElement("div", ...), is this virtual DOM (element)?

When we use JSX let el =
; or let el = React.createElement('div', ...); (they are identical, AFAIK). Is el, or
virtual DOM (element), or does virtual DOM mean something else? So my question really is, is
what…
nonopolarity
  • 146,324
  • 131
  • 460
  • 740
1
vote
0 answers

What does virtual DOM really mean?

I am new to react, please bear with me :) i have read some documentation about the virtual dom and real dom, but i am still not getting the concept of virtual dom. so far i have got the idea is that (correct me if it's wrong), so a component's…
Jonas Lu
  • 181
  • 1
  • 12
1
vote
1 answer

Visualize the Virtual DOM in React?

Is there any way to visualize the Virtual DOM and/or Reconciliation phase in React, to be able to compare the previous snapshot with the newly rendered one? This would be extremely helpful for debugging cases where React causes unexpected unmounting…
Cethy
  • 551
  • 6
  • 18
1
vote
0 answers

Changing DOM in batch is not faster than changing DOM one by one

I know that changing DOM in a batch is faster than changing DOM one by one. And this is the concept of Virtual DOM. The problem is the example that I made. In this example, I wanna show changing DOM in a batch is faster. So I compared change DOM in…
welin
  • 11
  • 1
1
vote
1 answer

Vuejs generate elements from object inside components

I'm trying to create a component that will render elements inside VueJs virtual dom with a Vuex state. The problem is I get this error but I don't understand why and how to fix it Avoid using observed data object as vnode data: {"class":"btn…
Jérôme
  • 1,966
  • 4
  • 24
  • 48