Advanced React Hooks

Advanced hooks for specific use cases.

useLayoutEffect

Runs before browser paint:

import { useLayoutEffect, useRef } from 'react';

function Tooltip() {
  const ref = useRef();

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    // Position tooltip based on height
  }, []);

  return <div ref={ref}>Tooltip</div>;
}

useImperativeHandle

Customize ref value:

import { forwardRef, useImperativeHandle, useRef } from 'react';

const Input = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    clear: () => inputRef.current.value = ''
  }));

  return <input ref={inputRef} />;
});

// Usage
const ref = useRef();
<Input ref={ref} />
ref.current.focus();
ref.current.clear();

useId

Generate unique IDs:

import { useId } from 'react';

function Form() {
  const id = useId();

  return (
    <>
      <label htmlFor={id}>Name:</label>
      <input id={id} />
    </>
  );
}

Remember

• useLayoutEffect: Synchronous DOM reads
• useImperativeHandle: Custom ref API
• useId: Stable unique IDs
• Use only when needed

Next: Learn render optimization!