Skip to content

dbeaver/pro#8333 fix: Eliminate React 19 error in useEditorDefaultExtensions #4381

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SychevAndrey wants to merge 1 commit into
base: devel
Choose a base branch
from
+10 −8
Open

dbeaver/pro#8333 fix: Eliminate React 19 error in useEditorDefaultExtensions #4381

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions webapp/packages/plugin-codemirror6/src/useEditorDefaultExtensions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
tooltips,
} from '@codemirror/view';
import { classHighlighter } from '@lezer/highlight';
import { useRef } from 'react';
import { useState } from 'react';

import { GlobalConstants, isObjectsEqual } from '@cloudbeaver/core-utils';
import { clsx } from '@dbeaver/ui-kit';
Expand Down Expand Up @@ -119,16 +119,18 @@ const DEFAULT_EXTENSIONS_COMPARTMENT = new Compartment();

/** Provides the necessary extensions to establish a basic editor */
export function useEditorDefaultExtensions(options?: IDefaultExtensions): [Compartment, Extension] {
const previousOptions = useRef(options);
const isOptionsChanged = !isObjectsEqual(options, previousOptions.current);
const extensions = useRef<[Compartment, Extension] | null>(null);
const [state, setState] = useState<{ options: IDefaultExtensions | undefined; result: [Compartment, Extension] }>(() => ({
options,
result: createExtensions(options),
}));

if (isOptionsChanged || extensions.current === null) {
previousOptions.current = options;
extensions.current = createExtensions(options);
if (!isObjectsEqual(options, state.options)) {
const result = createExtensions(options);
setState({ options, result });

@devnaumov devnaumov Jun 4, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this will cause extra rerenders, its better to comment such code parts as expected than fix it this way

@SychevAndrey SychevAndrey Jun 4, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how many? how will it affect the product?

@devnaumov devnaumov Jun 5, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Props are changed -> rerender, then if options are different, you are setting state that rerenders one more time and its just a bad react practice. You are executing state update from component body to sync state from props, it might cause infinite rerenders and other problems. I think that the prev approach is cleaner and less buggy. If we know what we are doing, we dont need to fix it. I suggest to disable this eslint rule as this pattern is commonly used across react ecosystem, what do you think?

return result;
}

return extensions.current;
return state.result;
}

function createExtensions(options?: IDefaultExtensions): [Compartment, Extension] {
Expand Down
Loading