React 18

[toloudis]

Estimated time to review: 20-30 min?
Most of the changes are converting "class components" to "functional components"

Coauthored with @frasercl
Resolves much of #191 (React lifecycle takes up extra cpu cycles during playback)

• Upgrade to React 18, bump some other dependency versions.

• Convert to functional components everywhere.

• Actually use production mode for production builds.

• Some updates to SharedCheckbox

future TODOs clean up some seemingly harmless console warnings:
1.

Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>. Error Component Stack
    at p (<anonymous>)
    at p (<anonymous>)
    at li (<anonymous>)
    at O (styled-components.br…ser.esm.js:32:23549)
    at ul (<anonymous>)
    at O (styled-components.br…ser.esm.js:32:23549)
    at div (<anonymous>)
    at O (styled-components.br…ser.esm.js:32:23549)
    at div (<anonymous>)
    at LandingPage (index.tsx:235:33)

2. (antd Tooltip uses findDOMNode)

Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node Error Component Stack
    at SingleObserver (index.js:23:24)
    at ResizeObserver (index.js:24:24)
    at eval (index.js:61:34)
    at Tooltip (Tooltip.js:23:32)
    at eval (index.js:52:16)
    at div (<anonymous>)
    at div (<anonymous>)
    at div (<anonymous>)
    at Toolbar (index.tsx:61:24)

3. (nouislider-react is out of date and still using defaultProps)

Warning: v: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. Error Component Stack
    at v (nouislider-react.umd…ction.min.js:1:3395)
    at SmarterSlider (SmarterSlider.tsx:13:35)
    at span (<anonymous>)
    at span (<anonymous>)
    at SliderRow (index.tsx:34:3)
    at PlaySliderRow (index.tsx:123:54)

[github-actions]

PR Preview Action v1.4.8
Preview removed because the pull request was closed.
2025-01-07 20:09 UTC

[toloudis]

file got autoformatted: the only changes in gh actions workflows are to use node 20 instead of 18

[toloudis]

fixes a bug with how slider handles are rendered

[toloudis]

key change: production mode actually uses production mode. TODO: see how easy it is to debug using source-map in production while still getting higher performance of production mode.

[toloudis]

this block cleans up warnings/errors in devServer when testing production mode

[ShrimpCryptid]

Is the max asset size 3.5 MB?

[toloudis]

if we ever exceed it we can just increase these amounts or decide on splitting.. this is just a starting point that makes things work

[ShrimpCryptid]

Always fun to watch React class components get turned into functional ones!