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.
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:
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
});
Enter the URL of a public GitHub repository