When working with concurrent operations, separate conditional logic from potentially expensive or suspenseful execution paths. This improves performance, prevents race conditions, and makes concurrent code more predictable and maintainable.

Why it matters:

How to apply it:

  1. Hoist conditional checks higher in the call stack
  2. Only invoke complex operations when necessary
  3. Structure tests to properly simulate real concurrency patterns

Example - Before:

function preloadInstanceAndSuspendIfNeeded(type, props, workInProgress, renderLanes) {
  // This check happens on every call, even when it's not needed
  if (!maySuspendCommit(type, props)) {
    // Regular path...
  } else {
    // Suspending path...
  }
}

Example - After:

// In the calling function (e.g., completeWork):
const maySuspend = checkInstanceMaySuspend(type, props);
if (maySuspend) {
  preloadInstanceAndSuspendIfNeeded(type, props, workInProgress, renderLanes);
}

// Then the function only handles suspension cases
function preloadInstanceAndSuspendIfNeeded(type, props, workInProgress, renderLanes) {
  // Only suspension logic here
}

For testing concurrent operations, model tests to match real-world behavior using appropriate timing mechanisms:

await act(async () => {
  submitButton.current.click();
  await waitForMicrotasks(); // Allow natural processing cycles
  submitButton.current.click(); // Second interaction
});