#dom

Reactintermediate

Portals for rendering a modal outside the DOM hierarchy

import { useEffect, useState, type ReactNode } from "react";
import { createPortal } from "react-dom";

export const Modal = ({ children, onClose }: { children: ReactNode; onClose: () => void }) => {
  const [container] = useState(() => document.createElement("div"));

Render a modal into its own DOM node with createPortal, so its stacking context and layout escape a clipped or transformed ancestor.

Reactintermediate

useLayoutEffect vs useEffect: measuring the DOM before paint

import { useRef, useState, useLayoutEffect } from "react";

export const Tooltip = ({ text }: { text: string }) => {
  const [height, setHeight] = useState(0);
  const ref = useRef<HTMLDivElement>(null);

Use useLayoutEffect to measure a DOM node and apply the result before the browser paints, avoiding the flicker useEffect leaves behind.

Chrome APIsintermediate

The View Transitions API for animated state changes

export const swapView = (activeEl: HTMLElement, render: () => void) => {
  if (!document.startViewTransition) {
    render();
    return;
  }

document.startViewTransition animates a DOM update with a browser-computed crossfade or morph — no keyframes, no FLIP technique, no library.