Upgrade React to v19.2.3 (and fix type errors in useRef hooks)

[Copilot]

React 19 requires explicit initial values for useRef. Previously valid patterns like useRef<HTMLElement>() now fail type checking.

Changes

React upgrade

• Upgraded react and react-dom to ^19.2.3
• Upgraded @types/react and @types/react-dom to ^19.2.3 (matching versions with runtime packages, using caret prefix per project convention)

Type fixes

• Added explicit undefined initial values to useRef<HTMLElement>() calls in ModelAlertsResults.tsx and MethodRow.tsx
• Updated useScrollIntoView signature to accept RefObject<E | null> instead of RefObject<HTMLElement>
• Updated ref prop types in AlertTableResultRow, AlertTablePathRow, and AlertTablePathNodeRow to include | null
• Updated test mocks to match new ref types

Configuration

• Fixed ESLint config: ensured reactHooks.configs.flat['recommended-latest'] is used for flat config compatibility (the non-flat config uses old eslintrc format which is incompatible with ESLint flat config)

Example

Before:

const ref = useRef<HTMLElement>();  // Type error in React 19

After:

const ref = useRef<HTMLElement | undefined>(undefined);  // OK

Remember to update the changelog if there have been user-facing changes!

Original prompt

Update the codebase in /extensions/ql-vscode and any affected parts to address all type errors caused by the React v19.2 upgrade, as visible in the CI checks. Specifically, address issues involving useRef now requiring a default value (so types like useRef() are no longer allowed; instead, useRef<T | undefined>(undefined)). Update downstream code to handle T | undefined as necessary, including code expecting T or directly accessing ref.current. Make sure to reference Robert's comments in #4131 for more guidance and code locations. Ensure all CI tests are passing and the extension works as expected after the fixes.

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[Copilot]

Pull request overview

This PR upgrades React and React DOM from v18.3.1 to v19.2.3, along with their corresponding type definitions. The upgrade requires fixing type errors caused by React 19's stricter type requirements for useRef hooks, which now require explicit initial values.

Key changes:

• Upgraded React packages to v19.2.3 with matching type definitions
• Updated useRef calls to include explicit undefined initial values where DOM refs are used
• Updated ref-related types throughout the codebase to include | null to align with React 19's type system

Reviewed changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
package.json	Updated React and React DOM to ^19.2.3, along with their type definitions
package-lock.json	Resolved dependencies including React 19.2.3, scheduler 0.27.0, removed @types/prop-types dependency
useScrollIntoView.tsx	Added generic type parameter E and updated ref type to accept E | null
AlertTableResultRow.tsx	Updated selectedItemRef prop type to include | null
AlertTablePathRow.tsx	Updated selectedItemRef prop type to include | null
AlertTablePathNodeRow.tsx	Updated selectedItemRef prop type to include | null
MethodRow.tsx	Added explicit undefined initial value to useRef call
ModelAlertsResults.tsx	Added explicit undefined initial value to useRef call
AlertTableResultRow.spec.tsx	Updated test mock ref type to include | null
AlertTablePathRow.spec.tsx	Updated test mock ref type to include | null

Files not reviewed (1)

• extensions/ql-vscode/package-lock.json: Language not supported

Comments suppressed due to low confidence (1)

extensions/ql-vscode/src/view/model-alerts/ModelAlertsResults.tsx:95

• The ref is created and used in a useEffect hook to scroll into view, but it's never actually attached to any DOM element in the JSX. The ref should be attached to one of the elements in the return statement (likely the outermost div or TitleContainer) using ref={ref} for the scroll functionality to work.

  const ref = useRef<HTMLElement | undefined>(undefined);

  useEffect(() => {
    if (
      revealedModel &&
      createModeledMethodKey(modelAlerts.model) ===
        createModeledMethodKey(revealedModel)
    ) {
      ref.current?.scrollIntoView({
        behavior: "smooth",
        block: "center",
      });
    }
  }, [modelAlerts.model, revealedModel]);

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[d10c]

I would want to squash these commits before merging, and therefore recommend reviewing all files at once instead of commit-by-commit.