nextTick for react, idea from vue.js

nextTick.tsx

"use client";
import { useState, useRef, useLayoutEffect } from "react";
import useNextTick, { useNextTickLayout } from "use-next-tick";

function MyComponent() {
  const [count, setCount] = useState(0);
  const ref = useRef<HTMLSpanElement>(null);
  const nextTick = useNextTick();
  /*
  const nextTick = useNextTickLayout(); // if you need `useLayoutEffect` instead off `useEffect`
  */

  const handleClick = () => {
    setCount((c) => c + 1);
    nextTick(() => {
      console.log(ref.current?.textContent); // "1" ✓
    });
  };

  return <span ref={ref}>{count}</span>;
}