[Meta] React@18 legacy mode upgrade QA

[Dosant]

Shared UX team is working on React@18 upgrade.

We plan to upgrade in 2 phases:

1. Phase 1: Upgrade React packages to version 18 and keep running in Legacy mode, which should behave mostly similarly to React@17.
2. Phase 2: Gradually migrate to Concurrent mode.

We’re almost ready to complete phase 1:

• All types breaking changes have been addressed and Kibana is already using @types/react@18 in main
• We’ve fixed unit tests breaking changes in main. Kibana is already using the latest @testing-library/react in main and we've fixed the breaking changes that are backward compatible and can be merged separately.
• We’ve addressed all runtime issues found by functional tests and CI functional tests are now green when running with React@18.

The final PR for the React@18 packages upgrade is minimal—it only updates the packages and includes a few snapshot updates. While we don’t expect any immediate benefits from this upgrade, it is an important step toward migrating to concurrent rendering, which will unlock performance improvements and new APIs.

Kibana’s UI functional tests coverage and a small number of discovered runtime issues give us a lot of confidence, but we need teams that own any UI to help with QA before the merge to discover any critical UI issues that could have been missed by functional testing.

• Please mark your team's sub-tasks as Completed when finished
• Feel free to convert to sub-issue
• Please raise blockers in the comments or in the #kibana-react-18 channel
• 📆 If not blocking issues raised, we plan to merge on Monday, March 3
• Feel free to update point of contact (it was copied from [Meta] EUI Visual Refresh integration and QA #199715) or remove the sub-issue if the not relevant for you team

If you have questions, please do not hesitate to reach out to the shared-ux team in #kibana-react-18 channel

Per team sub-task list (feel free to convert to sub-issue)

Mark [x] when Completed when finished testing your UIs with React@18

• [React@18 QA] @elastic/appex-sharedux #209719
• [React@18 QA] [Fleet] Test Fleet UI & Integrations with React 18 #211609
• [React@18 QA] @elastic/kibana-cloud-security-posture #209763
• [React@18 QA] @elastic/kibana-core #209890
• [React@18 QA] @elastic/kibana-data-discovery #210134 @kertal
• [React@18 QA] @elastic/kibana-esql @stratoula
• [React@18 QA] @elastic/kibana-management #212512 @sabarasaba
• [React@18 QA] @elastic/kibana-presentation @cqliu1
• [React@18 QA] @elastic/kibana-security  #209986
• [React@18 QA] @elastic/kibana-visualisations #212872 @markov00
• [React@18 QA] @elastic/logstash @jsvd, @mashhurs
• [React@18 QA] @elastic/ml-ui #209748 @peteharverson
• [React@18 QA] @elastic/obs-ai-assistant and @elastic/obs-knowledge-team #209797 @viduni94
• [React@18 QA] @elastic/obs-entities @klacabane
• [React@18 QA] @elastic/obs-ux-infra_services-team #209735
• [React@18 QA] @elastic/obs-ux-logs-team #209726
• [Meta][React@18 QA] @elastic/obs-ux-management-team #210001 @jasonrhodes
• [React@18 QA] @elastic/observability-ui @smith / @MiriamAparicio
• [React@18 QA] @elastic/response-ops #209751 @cnasikas
• [React@18 QA] @elastic/search-kibana @sphilipse
• [React@18 QA] @elastic/security-defend-workflows #210551 @szwarckonrad
• [React@18 QA] @elastic/security-detection-engine @rylnd
• [React@18 QA] @elastic/security-detection-rule-management #212932 @nikitaindik
• [React@18 QA] [Entity Analytics] Test Entity Analytics UIs in React 18 #210315 @machadoum
• [React@18 QA] @elastic/security-generative-ai @patrykkopycinski
• [React@18 QA] @elastic/security-scalability #209793 @ebeahan
• [React@18 QA] @elastic/security-service-integrations #209891 @ebeahan
• [React@18 QA] @elastic/security-threat-hunting-explore @asnehalb
• [React@18 QA] @elastic/security-team-threat-hunting-investigations #211975 @PhilippeOberti
• [React@18 QA] @elastic/streams-program-team @klacabane

How to test

Testing can be done locally by using the PR (#209337) or from main with REACT_18=true ENV flag:

REACT_18=true yarn kbn bootstrap
REACT_18=true yarn start

You can also use cloud or serverless deployment from that PR.

Tip

• Locally you can tell that you're running React@18 by the following message in the console: Kibana is built with and running React@18.2.0, muting legacy root warning.
• When deployed and when having React Dev Tools extension you can check the version with __REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version in console

What to look for

Tip

Look for blank screens, error splash screens, unresponsive pages, new errors in the console, unpredictable UI behavior (like laggy text inputs that skip letters when typing fast). You can also review the list of addressed runtime issues discovered by functional tests in the section below

Runtime issues discovered by functional tests

• useId can't be used with querySelector
  • prefer attribute selector for selecting element ids #191632
  • [React@18 failing test] fix discover/group3 discover doc viewer flyout accessibility should use expected a11y attributes #196844

The ID scheme that is produced by new useId hook returns IDs that look like :S1:, but : is not a valid character for CSS identifiers, so code like breaks:

const id = useId();
document.querySelector(id); // fails with `SyntaxError: ':id:' is not a valid selector.`

• useEffect must return undefined or destroy function, objects no longer allowed
  • [React@18] fix incorrect useEffect return value #195421

- useEffect(() => fetch(), []); // fails with an error, likely blank screen
+ useEffect(() => {
+ fetch()
+ }, []);

• Updating .value of controlled text input in useEffect is causing typing issues
  • [EuiSearchBox][React@18 Legacy Mode] useLayoutEffect in search_box eui#8047
  • [React@18] useLayoutEffect when setting value from a prop in react-monaco-editor #195775

This pattern for controlled inputs breaks when running in legacy mode where it worked fine with React@17

useEffect(() => {
    if (inputRef.current) {
      inputRef.current.value = value;
    }
  }, [value]);

• Controlled text inputs shouldn't be async, and it seemed that where they are, it became worse
  • [TableListView] Fix letters are skipped when typing fast #194009

Consider situation like this. This is a controlled input but the value is updated async. With React@18 we noticed that the lag could become worse as we were seeing some new flaky tests because of this where input skips letter:

export function App() {
  const [value, setValue] = useState("");

  return (
      <input
        type="text"
        value={value}
        onChange={(e) => {
          const value = e.currentTarget.value;
          setTimeout(() => {
            setValue(value);
          }, 0);
        }}
      />
  );
}

• Issue due to non-pure reducer
  • [React@18 failing test] visualize app - new charts library visualize area charts date histogram when no time filter interval errors should show error when calendar interval invalid #196303

In this case a state reducer was not pure as it threw an error when executed the first time (and not at later times). React@17 executed that reducer twice so error didn't propagate to the UI, wheres in React@18 that behavior has changed and we saw that error on UI. More details in the PR.

• Dataset Quality infinite re-render loop, render never stabilizes
  • [React@18 failing test] Navigate to dataset details should navigate to details page from a main page.  #196384 [React@18 failing tests] Dataset quality handles user privileges #197830

useEffect deps updates caused infinite loop but for some reason it stabilized with React@17, but not with React@18

Issues discovered outside of functional tests

... Please add any issues that are found outside of functional tests ...

If you have questions, please do not hesitate to reach out to the shared-ux team in #kibana-react-18 channel

[elasticmachine]

Pinging @elastic/appex-sharedux (Team:SharedUX)

[smith]

[React@18 QA] @elastic/observability-ui @smith / @MiriamAparicio

@Dosant I've checked off this line. All parts of the Observability UI should be accounted for with the individual issues for individual teams.

[TinaHeiligers]

@Dosant Core-review complete with no significant findings.

[szwarckonrad]

@Dosant
I have tested the Defend Workflow functionalities on the final PR, confirming via React DevTools that the React version is 18.2. I haven’t noticed any regressions in the core functionalities we own—everything renders correctly and behaves as expected. Detailed steps can be found in the subticket I’ve marked as completed at this point.

[kpollich]

I completed the testing for the Fleet + Integrations plugins and all worked as expected. Thanks for the great work here!

[kapral18]

We completed testing for threat-hunting thanks as well.

[peteharverson]

I completed a manual test of all the pages in the ML plugin, and the transform pages under Stack Management. All looked good and didn't spot any regressions. Checklist of pages tested can be found in #209748. Thanks for all the work here @Dosant .

[klacabane]

Completed testing for entities and streams program. Everything is working as expected

[jasonrhodes]

We've completed the React 18 manual testing for our areas in @elastic/obs-ux-management-team

[markov00]

Test completed across Kibana Visualizations components, nothing concerning this upgrade have been found

[nikitaindik]

Rule Management team testing completed. No issues found 🚀
Tested our features on main with React v18 enabled.

Also, removed the @elastic/security-detections-response team from the list since it's just a grouping for the Rule Management and the Detection Engine teams. Both are already in the list.

[Dosant]

The React@18 upgrade PR was merged into main today.

Thanks to everyone who helped with testing!

I'll keep this issue open for a week or two to follow up on any issues that may arise

[stratoula]

Amazing job @Dosant and team!

[Dosant]

@rbrtj found one issue #217291

it is the same as one we saw previously mentioned in the description:

useEffect must return undefined or destroy function, objects no longer allowed #195421

- useEffect(() => fetch(), []); // fails with an error, likely blank screen
+ useEffect(() => {
+ fetch()
+ }, []);

So far this is the only issue I've heard of, which sounds great :)

I'll close this issue, but feel free to link more if anything else come up

[Dosant]

1. Confirmed issues in EUI data grid with React@18 legacy mode Doc Viewer table crashes when the "Down arrow" and "Left arrow" are pressed at the same time #220355
2. Another potential issue from React@18 legacy mode Failing test: Chrome X-Pack UI Functional Tests.x-pack/test/functional/apps/discover/group1/reporting·ts - discover - group 1 Discover CSV Export Check Available is available if new #219807 (comment), test was skipped, can't reproduce locally. Needs further confirmation