[React@18 QA] @elastic/obs-ux-logs-team

[tonyghiani]

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 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 [email protected], 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

[elasticmachine]

Pinging @elastic/obs-ux-logs-team (Team:obs-ux-logs)

[achyutjhunjhunwala]

I have tested this issue on the deployed PR.
Also the pages look good except for the Dataset Quality Fix It Flow Flyout where the theme color looks quite light making the text illegible. I suspect thats because of Borealis theme and not React 18.