Skip to content

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

Closed
@tonyghiani

Description

@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

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(() => fetch(), []); // fails with an error, likely blank screen
+ useEffect(() => {
+ fetch()
+ }, []);

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]);

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);
        }}
      />
  );
}

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.

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

Metadata

Metadata

Labels

Team:obs-ux-logsObservability Logs User Experience Team

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions