Skip to content

fix(perf): debounce request body textarea Redux dispatch to fix typing#10892

Open
joranv1 wants to merge 1 commit into
swagger-api:masterfrom
joranv1:fix/request-body-textarea-typing-lag
Open

fix(perf): debounce request body textarea Redux dispatch to fix typing#10892
joranv1 wants to merge 1 commit into
swagger-api:masterfrom
joranv1:fix/request-body-textarea-typing-lag

Conversation

@joranv1
Copy link
Copy Markdown

@joranv1 joranv1 commented May 18, 2026

Description

Debounce the Redux dispatch in the request body textarea components to eliminate per-keystroke re-renders.

Both RequestBodyEditor (OAS3) and ParamBody (Swagger 2) were calling props.onChange which dispatches a Redux action and triggers a full component tree re-render on every single keystroke. Since both components already maintain local component state that drives the textarea display, the fix is to keep local state updates immediate (so typing feels instant) while debouncing the Redux dispatch with a 350ms timeout.

A componentWillUnmount cleanup was added to both components to cancel any pending debounce timer on unmount.

Motivation and Context

Typing in the request body textarea causes 300–800ms lag per keystroke on medium to large OpenAPI specs, making the Try It Out feature nearly unusable.
This affects both OAS3 (request-body-editor.jsx) and Swagger 2 (param-body.jsx).

The root cause is that every keystroke in the body textarea immediately dispatches a Redux state update, causing the entire component tree to re-render before the next character can be typed. URL/query parameter inputs already avoid this by using DebounceInput from react-debounce-input with a 350ms debounce timeout. This fix applies the same pattern to the body textarea components using lodash/debounce, which is already a project dependency.

Fixes #5113
Fixes #5850

How Has This Been Tested?

  • Loaded a large OpenAPI 3.0 spec and typed rapidly in the request body textarea. Typing is now instant with no per-keystroke lag.
  • Verified that switching content types and resetting the form still correctly populates the body (the applyDefaultValue / updateValues paths
    dispatch immediately and are not debounced).
  • Verified that URL/query parameter inputs are unaffected.
  • Ran the full unit test suite (npm run test:unit), all pre-existing tests pass, no new failures introduced.
  • Built the full production bundle (npm run build) successfully.

Checklist

My PR contains...

  • No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
  • Dependency changes (any modification to dependencies in package.json)
  • Bug fixes (non-breaking change which fixes an issue)
  • Improvements (misc. changes to existing features)
  • Features (non-breaking change which adds functionality)

My changes...

  • are breaking changes to a public API (config options, System API, major UI change, etc).
  • are breaking changes to a private API (Redux, component props, utility functions, etc.).
  • are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
  • are not breaking changes.

Documentation

  • My changes do not require a change to the project documentation.
  • My changes require a change to the project documentation.
  • If yes to above: I have updated the documentation accordingly.

Automated tests

  • My changes can not or do not need to be tested.
  • My changes can and should be tested by unit and/or integration tests.
  • If yes to above: I have added tests to cover my changes.
  • If yes to above: I have taken care to cover edge cases in my tests.
  • All new and existing tests passed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Performance issue when typing text UI hangs when typing in request body

1 participant