Performance issue when editing large queries

[hyaeco]

Hi! I'm using react-querybuilder to build dynamic rule sets which can be complex and large. I've noticed that once there are more than 20 rule/rule groups, typing into an input field inside a rule starts to feel noticeably laggy — there's a delay between each keystroke and the value updating.

This issue also seems to occur on the demo page — you can reproduce it by creating several rule groups, as shown in this video:

Screen.Recording.2025-06-20.at.18.43.45.mov

My setup is almost the same as the one used in the demo, and to the best of my knowledge, I’ve tried to follow the performance tips provided in the docs. But I might still be missing something.

const [query, setQuery] = useState(initialQuery);

const handleOnValidate = useCallback(() => ... );

<QueryBuilderDndWithoutProvider canDrop={handleCanDrop}>
  <QueryBuilder
    key="query-builder"
    fields={fields} //memoized
    getOperators={getOperators} //function outside of the component
    combinators={combinators} //constant outside of the component
    query={query}
    onQueryChange={setQuery}
    controlElements={{
      valueEditor: CustomValueEditor, //outside of the component
      ruleGroupHeaderElements: CustomRuleGroupHeader, //outside of the component
    }}
    controlClassnames={{
      fields: 'mx-2',
      ...(showBranches && { queryBuilder: 'queryBuilder-branches' }),
    }}
    context={{
      showLabels,
      showBranches,
    }}
    validator={handleOnValidate}
    disabled={!isEditMode}
    showCloneButtons
    showShiftActions
    enableDragAndDrop
    resetOnFieldChange
    resetOnOperatorChange
    enableMountQueryChange={false}
  />
</QueryBuilderDndWithoutProvider>

Has anyone else encountered this issue before? Is there a recommended way to improve performance in this case, or to prevent users from experiencing this kind of slowdown when working with large rule sets?

For example, is there a way to rerender only the input field or the specific rule being edited instead of all the rules?

Thanks in advance!

[jakeboone02]

After playing around with the code you've provided, I'm pretty sure the main problem is that your context prop is not memoized. Internally, context is not granularly memoized like controlClassnames, controlElements, and translations, so you have to memoize the entire object yourself. Probably just this:

const context = useMemo(() => ({ showLabels, showBranches }), [showLabels, showBranches]);

Let me know if that works!

I'll investigate the demo perf later. Thanks for the heads up.

[hyaeco]

Thanks a lot! This has significantly improved the lag! I still notice a bit of delay occasionally, but I haven't pinpointed exactly when or why it happens. Overall though, performance is looking much better.

[jakeboone02]

FYI the demo perf was fixed too. :) Ended up being a problem with syncing query state with the URL hash. I think I just ended up debouncing it.

[hyaeco]

Awesome! Is the fix included in the latest version?

[jakeboone02]

The demo perf issue was specific to the demo implementation, not RQB itself.