React Ref Patterns

The click-outside pattern is essential for dropdowns, modals, and tooltips. Attach a ref to the container, listen for mousedown on document, and call contains() to decide whether to close.

• Full reusable hook:

  import { useRef, useEffect } from 'react';
  
  function useClickOutside(callback) {
    const ref = useRef(null);
  
    useEffect(() => {
      function handleMouseDown(e) {
        if (ref.current && !ref.current.contains(e.target)) {
          callback();
        }
      }
      document.addEventListener('mousedown', handleMouseDown);
      return () => document.removeEventListener('mousedown', handleMouseDown);
    }, [callback]);
  
    return ref;
  }
  
  function Dropdown() {
    const [open, setOpen] = useState(false);
    const dropdownRef = useClickOutside(() => setOpen(false));
  
    return (
      <div ref={dropdownRef}>
        <button onClick={() => setOpen(o => !o)}>Toggle</button>
        {open && <ul><li>Item 1</li><li>Item 2</li></ul>}
      </div>
    );
  }

• Use mousedown rather than click so the close action fires before any click handler on the newly focused element. This prevents flickering when clicking between two dropdowns.
• Guard with ref.current && before calling contains — the ref may be null if the component unmounted between renders.

React has no built-in way to read a previous prop or state value, but a ref updated inside useEffect gives you exactly that — the value from the render that just committed.

• Generic usePrevious hook:

  import { useRef, useEffect } from 'react';
  
  function usePrevious(value) {
    const ref = useRef(undefined);
    useEffect(() => {
      ref.current = value; // runs AFTER render, so ref holds previous value during render
    }, [value]);
    return ref.current;
  }
  
  function PriceDisplay({ price }) {
    const prevPrice = usePrevious(price);
    const direction = price > prevPrice ? '↑' : price < prevPrice ? '↓' : '';
  
    return (
      <p>
        {price} {direction} (was {prevPrice ?? 'N/A'})
      </p>
    );
  }

• How the timing works: during render, ref.current still holds the previous value because the effect hasn't fired yet. After React commits the DOM, the effect updates ref.current to the new value, ready for the next render.
• Use this to skip an effect on the initial render by comparing current and previous values, or to animate differences between frames.

TypeScript has two ref types. Choosing the right one avoids unsafe non-null assertions and keeps autocompletion accurate.

Type	current	Created by	Use case
RefObject<T>	T | null (readonly)	useRef<T>(null)	DOM nodes React controls
MutableRefObject<T>	T (writable)	useRef<T>(initialValue)	Timer IDs, counters, previous values

• DOM element ref — always start with null:

  const inputRef = useRef<HTMLInputElement>(null);
  // inputRef is RefObject<HTMLInputElement>
  // Safe access with optional chaining:
  inputRef.current?.focus();

• Mutable value ref — supply a real initial value so TypeScript infers MutableRefObject:

  const timerId = useRef<ReturnType<typeof setTimeout> | null>(null);
  // Assign later:
  timerId.current = setTimeout(fn, 500);
  clearTimeout(timerId.current!);

• Typing a component that accepts a ref (React 19 style):

  import { useRef, useImperativeHandle } from 'react';
  
  type InputHandle = {
    focus: () => void;
    clear: () => void;
  };
  
  type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
    ref?: React.Ref<InputHandle>;
  };
  
  function FancyInput({ ref, ...props }: InputProps) {
    const innerRef = useRef<HTMLInputElement>(null);
  
    useImperativeHandle(ref, () => ({
      focus: () => innerRef.current?.focus(),
      clear: () => { if (innerRef.current) innerRef.current.value = ''; },
    }));
  
    return <input ref={innerRef} {...props} />;
  }
  
  // Parent:
  const formRef = useRef<InputHandle>(null);
  <FancyInput ref={formRef} placeholder="Email" />

• Avoid using as React.MutableRefObject<T> to force-cast DOM refs — this bypasses null safety. Instead, use optional chaining or an early-return null check.