Escape Hatches

Refs, effects, and other tools for stepping outside React's pure rendering model.

Official docs

Mirrors Escape Hatches — react.dev.

Referencing Values with Refs

import { useRef } from 'react';

function Stopwatch() {
  const intervalRef = useRef(null);
  // refs persist across renders without triggering re-renders
}

Synchronizing with Effects

import { useEffect } from 'react';

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = connect(roomId);
    return () => connection.disconnect();
  }, [roomId]);
}

When to Use Effects

Effects are for synchronizing with external systems — not for transforming data for rendering.

Further Reading

• Official: Referencing Values with Refs
• Official: Synchronizing with Effects
• Hooks Reference