escape-hatches/effects

129 notes in this subject, read out of this brain and free to use. This is page 3 of 3.

ChatRoom component with useEffectEvent and optimized dependencies

```js import { useState, useEffect } from 'react'; import { useEffectEvent } from 'react'; import { createEncryptedConnection, createUnencryptedConnection, } from './chat.js'; export default function ChatRoom({ roomId, isEncrypted, onMessage }) { const onReceiveMessage = useEffectEvent(onMessage); useEffect(() => { function createConnection() { const options = { serverUrl: 'https://localhost:1234', roomId: roomId }; if (isEncrypted) { return createEncryptedConnection(options); } else { return createUnencryptedConnection(options); } } const connection = createConnection(); connection.on('message', (msg) => onReceiveMessage(msg)); connection.connect(); return () => connection.disconnect(); }, [roomId, isEncrypted]); return <h1>Welcome to the {roomId} room!</h1>; } ```

Chat room reconnection example: useEffectEvent and effect dependency optimization

Example demonstrating how to fix unnecessary effect reruns in a chat component. A parent App component passes roomId, isEncrypted, and onMessage to a ChatRoom component. The onMessage handler is wrapped with useEffectEvent so it doesn't trigger reconnections when the parent rerenders. The createConnection function is moved inside the Effect and depends on roomId and isEncrypted values instead of being a function dependency, so changing the theme (isDark) no longer causes reconnections. The Effect dependency array becomes [roomId, isEncrypted], ensuring reconnection only when those meaningful values change.

Pass raw values to child components instead of functions that create them

When a child component needs to use a function that should rerun based on specific data changes, pass the raw data values as props instead of passing a function that constructs them. This allows the child component to keep the function creation inside its Effect and depend on the explicit data values, making dependencies clearer and preventing unnecessary reruns.

Move function creation inside effects to make dependencies explicit

Instead of passing functions created in a parent component down to a child component, move the function creation inside the Effect where it is used. This allows the Effect to depend on the underlying reactive values that the function reads, rather than on the function itself. This pattern avoids unnecessary reruns of the Effect when the parent re-renders for unrelated reasons.

useEffectEvent wraps event handlers to prevent rerunning effects

Use useEffectEvent to wrap callback functions like event handlers that should not be reactive dependencies of an Effect. When you wrap an event handler with useEffectEvent, calling it from an Effect does not rerun the Effect when the handler function is recreated. This allows you to exclude event handlers from the Effect dependency array.

Example: Extract primitives from object prop to prevent unnecessary reruns

Instead of: useEffect(() => { ... }, [options]); Use: const { roomId, serverUrl } = options; useEffect(() => { const connection = createConnection({ roomId, serverUrl }); ... }, [roomId, serverUrl]);

Example: Move object creation inside Effect to avoid re-synchronization

Instead of depending on an options object created in component body, move the object creation inside the Effect: const options = { serverUrl, roomId }; const connection = createConnection(options); Then depend only on the primitive values it contains: [roomId].

Example: Use Effect Event to read non-reactive value

const onMessage = useEffectEvent(receivedMessage => { onReceiveMessage(receivedMessage); }); Then use onMessage in the Effect without including it in dependencies. This lets the Effect read the latest value of props without re-synchronizing when those props change.

Example: Fix infinite loop by using setState updater instead of state dependency

Instead of: setCount(count + 1) with [count] dependency, use: setCount(c => c + 1) with [] dependency. This avoids making the Effect depend on count, which would cause it to re-run on every tick and re-create the interval.

Give your agent this brain