chore(recorder): update to React 18 #32101
Conversation
| @@ -30,12 +30,14 @@ export const Main: React.FC = ({ | |||
| window.playwrightSetSources = setSources; | |||
| window.playwrightSetPaused = setPaused; | |||
| window.playwrightUpdateLogs = callLogs => { | |||
| const newLog = new Map<string, CallLog>(log); | |||
There was a problem hiding this comment.
this closes over log from the outer scope, at the point in time where the closure is created. If log changes, e.g. because setLog is called, this will only be picked up if the component rerenders and the callback is reset. Before Concurrent React, apparently this component was rerendered often enough. With Concurrent mode that doesn't work anymore, though, and log sometimes points to an old version of the logs, dropping updates that were applied in between renders :/
The fix is to use an updater function so we always update based on the current version of the state, no matter when Main is rerendered.
Docs on updater function: https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state
There was a problem hiding this comment.
Thanks for the great description!
This comment has been minimized.
This comment has been minimized.
Test results for "tests 1"3 flaky29655 passed, 711 skipped Merge workflow run. |
Part of #31863. Updates most of our React usage to React 18. `recorder` doesn't seem to like it yet. I suspect that some of our code isn't compatible with concurrent mode, i've investigated that in #32101. --------- Signed-off-by: Simon Knott <[email protected]> Co-authored-by: Max Schmitt <[email protected]>
Part of #31863. Updates
recorderto use React 18.