Default to “do the minimum possible work per hot-path update.”
Apply these checks: 1) Early-exit before side effects
2) Keep props/callbacks stable during streaming
React.memo’d (or any memoized subtree), don’t pass freshly-created inline handlers every render. Use useCallback (and useMemo for derived values) so shallow prop comparisons remain true.3) Don’t recreate observers/effects due to irrelevant dependencies
ResizeObserver/event listeners, only depend on values actually used by the effect. If the effect body doesn’t read a dependency, removing it prevents unnecessary teardown/re-setup during frequent rerenders.4) Throttle at the right stage + memoize expensive transforms
5) Detect changes against consistent baselines
Example (stable handler + throttled transform):
const handleRightPanelOpen = useCallback((request: TurnOutputOpenRequest) => {
if (request.kind === 'subagent') {
onRightPanelOpen?.({ /* ... */ });
}
}, [onRightPanelOpen]);
const throttledContent = useThrottledValue(content ?? '', isStreaming);
const renderedContent = useMemo(() => {
if (throttledContent && source && sourceMarkdown?.transformMarkdown) {
return sourceMarkdown.transformMarkdown(throttledContent, { source });
}
return throttledContent;
}, [throttledContent, source, sourceMarkdown?.transformMarkdown]);
Use this standard to review PRs that touch streaming, parsing, rendering, observers, and settings-change detection.
Enter the URL of a public GitHub repository