From the website and some articles, i have learned that any changes made to the app will first be reflected in the Virtual DOM. and then to the Real DOM after diffing both trees. the lifecycle hook useEffect will fire once the Real DOM is populated.

Problem

import React from 'react';
import { useEffect, useRef } from 'react';

export function App(props) {
  const ref = useRef();
  useEffect(() => {


    const ref2 = ref.current;

    const div = document.createElement('div')
    div.innerHTML = "ASDF"
    div.style.position = "absolute";
    div.style.top = 0;
    div.style.transition = "all 5s"


    ref2.appendChild(div);

    // this should work theoretically and my div should get a transition
    div.style.top = "100px"


  }, [])
  console.log("render")
  return (
    <div ref={ref} className='App'>
      <h1>Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

// Log to console
console.log('Hello console')

Running the above code gives a static div with top as 100px instead of a transition.

So, I tried the following code

import React from 'react';
import { useEffect, useRef } from 'react';

export function App(props) {
  const ref = useRef();
  useEffect(() => {


    const ref2 = ref.current;

    const div = document.createElement('div')
    div.innerHTML = "ASDF"
    div.style.position = "absolute";
    div.style.top = 0;
    div.style.transition = "all 5s"



    ref2.appendChild(div);
    
    // The following three lines is the only change
    setTimeout(()=>{
      div.style.top = "100px"
    }, 0)

  }, [])
  console.log("render")
  return (
    <div ref={ref} className='App'>
      <h1>Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

// Log to console
console.log('Hello console')

and this gives me the result i wanted. where initially the div is positioned at the top and animates to 100px.

**Why does a 0 second setTimeout work? Does it have something to do with the event loop? **

I can’t use useTransition, animations API, framer-motion or any other animation method. I need the transition to happen this way only. Thank you for your patience!