perf(explore): use useDeferredValue for datasource panel search

[rusackas]

SUMMARY

Refs #39890. Second useDeferredValue adoption (after #39928). Replaces the fixed-delay useDebounceValue with useDeferredValue in the explore Datasource Panel's column/metric search box.

Why useDeferredValue is the right fit here

Same UI-filter pattern as #39928's TableExploreTree migration:

• The input reads inputValue directly (kept responsive on every keystroke).
• matchSorter reads searchKeyword, now derived via useDeferredValue.
• React schedules the filter computation as low-priority work and interrupts it on each new keystroke, so there is no FAST_DEBOUNCE window holding the filtered list behind the input.

The Constants import (only used for FAST_DEBOUNCE) is dropped.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

No visual change. Behaviorally: column/metric search in the explore datasource panel should feel snappier — typing never lags behind because the filter is no longer waiting on a debounce window before recomputing.

TESTING INSTRUCTIONS

1. Open the explore view for any chart with a datasource that has many columns/metrics.
2. Type rapidly in the datasource-panel search field. Input should stay responsive.
3. Filter results should converge to the same end state as before.
4. Clearing the field should restore the unfiltered list.
5. `npm test -- --testPathPatterns='DatasourcePanel'` passes locally (22/22).

ADDITIONAL INFORMATION

• Has associated issue: TODO: Adopt React 18 concurrent features now that the upgrade has landed #39890
• Required feature flags:
• Changes UI
• Includes DB Migration
• Introduces new feature or API
• Removes existing feature or API

[bito-code-review]

Code Review Agent Run #7626c3

Actionable Suggestions - 0

Additional Suggestions - 2

• superset-frontend/src/explore/components/DatasourcePanel/index.tsx - 2

  • Performance regression from debouncing to deferring · Line 19-19
    Replacing useDebounceValue with useDeferredValue for search input handling changes the update behavior from debounced (updates 250ms after typing stops) to immediate with deferred rendering. This can cause performance issues as filtering computations (via matchSorter) now run on every keystroke instead of after typing pauses, potentially leading to excessive CPU usage during fast typing. Other search implementations in the codebase consistently use debouncing for this reason. Revert to useDebounceValue to maintain performance and consistency.
    Code suggestion

     @@ -19,1 +19,1 @@
    - import { useContext, useDeferredValue, useMemo, useState } from 'react';
    + import { useContext, useMemo, useState } from 'react';

  • Incorrect hook for search debouncing · Line 162-162
    useDeferredValue does not prevent computation like debouncing does; revert to maintain performance.
    Code suggestion

     @@ -162,1 +162,1 @@
    - const searchKeyword = useDeferredValue(inputValue);
    + const searchKeyword = useDebounceValue(inputValue, Constants.FAST_DEBOUNCE);

Review Details

• Files reviewed - 1 · Commit Range: 7bd6b30..7bd6b30

  • superset-frontend/src/explore/components/DatasourcePanel/index.tsx
• Files skipped - 0
• Tools

  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[netlify]

✅ Deploy Preview for superset-docs-preview ready!

Name	Link
🔨 Latest commit	6390c2c
🔍 Latest deploy log	https://app.netlify.com/projects/superset-docs-preview/deploys/69fe51125e41e200084c5883
😎 Deploy Preview	https://deploy-preview-39970--superset-docs-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull request overview

Updates the Explore Datasource Panel’s column/metric search to use React 18’s useDeferredValue instead of a fixed-delay debounce, keeping the input responsive while deferring the expensive client-side filtering work.

Changes:

• Replaced useDebounceValue(inputValue, Constants.FAST_DEBOUNCE) with useDeferredValue(inputValue) for the datasource search keyword.
• Removed the now-unused Constants and useDebounceValue imports.