#rendering-performance

Reactadvanced

Context selector pattern to stop re-rendering every consumer

import { createContext, useContext, useSyncExternalStore } from "react";

type State = { count: number; user: { name: string } };
type Listener = () => void;

Build a selector hook on useSyncExternalStore so components only re-render when the slice of context state they read actually changes.

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.

Reactintermediate

React.memo with a custom comparator for deep-equal props

import { memo } from "react";

type Props = { user: { id: string; name: string; tags: string[] } };

const isEqual = (prev: Props, next: Props) =>

Skip re-renders when props are structurally equal but not referentially equal, using memo second argument instead of a deep-equal library.