mirror of
https://github.com/apache/superset.git
synced 2026-05-21 15:55:10 +00:00
perf(DatasourceEditor): stop rebinding ctrl+shift+f on every SQL keystroke
The Mousetrap binding for ctrl+shift+f depended on `onQueryFormat`, which itself depends on `datasource.sql`. Every keystroke in the SQL editor recreated `onQueryFormat`, which re-fired the update effect, which unbound and rebound the global keyboard shortcut. That's a lot of Mousetrap churn for a 'format SQL' shortcut. Bind once on mount; route through refs (`isEditModeRef`, `onQueryFormatRef`) that the per-render effect keeps current. Per @sadpandajoe's review comment on the FC conversion PR. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1366,10 +1366,13 @@ function DatasourceEditor({
|
||||
// Mark initial mount as complete after first render cycle
|
||||
// This prevents useEffect hooks from firing on mount
|
||||
isInitialMount.current = false;
|
||||
// Bind ctrl+shift+f once on mount and route through refs so we don't
|
||||
// unbind/rebind on every SQL-editor keystroke (onQueryFormat's identity
|
||||
// changes with datasource.sql).
|
||||
Mousetrap.bind('ctrl+shift+f', e => {
|
||||
e.preventDefault();
|
||||
if (isEditMode) {
|
||||
onQueryFormat();
|
||||
if (isEditModeRef.current) {
|
||||
onQueryFormatRef.current?.();
|
||||
}
|
||||
return false;
|
||||
});
|
||||
@@ -1391,16 +1394,12 @@ function DatasourceEditor({
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Update Mousetrap binding when isEditMode changes
|
||||
// Keep the refs read by the (one-shot) Mousetrap handler up to date.
|
||||
const isEditModeRef = useRef(isEditMode);
|
||||
const onQueryFormatRef = useRef(onQueryFormat);
|
||||
useEffect(() => {
|
||||
Mousetrap.unbind('ctrl+shift+f');
|
||||
Mousetrap.bind('ctrl+shift+f', e => {
|
||||
e.preventDefault();
|
||||
if (isEditMode) {
|
||||
onQueryFormat();
|
||||
}
|
||||
return false;
|
||||
});
|
||||
isEditModeRef.current = isEditMode;
|
||||
onQueryFormatRef.current = onQueryFormat;
|
||||
}, [isEditMode, onQueryFormat]);
|
||||
|
||||
// componentDidUpdate for props.datasource changes
|
||||
|
||||
Reference in New Issue
Block a user