Description
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 withquerySelector
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
- useEffect(() => fetch(), []); // fails with an error, likely blank screen
+ useEffect(() => {
+ fetch()
+ }, []);
- Updating
.value
of controlled text input inuseEffect
is causing typing issues
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
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
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
useEffect deps updates caused infinite loop but for some reason it stabilized with React@17, but not with React@18