Firefly-1127: upgrade react to 18

[robyww]

Firefly-1127: upgrade react to 18

• so trying out useTransition() hook in useStoreConnector
• Trying useDeferredValue in ImageViewer

building.

• before building
  • cd <path-to-firefly>/firefly
  • rm -rf node_modules
  • yarn --frozen-lockfile
• then normal gradle build

Test:

• https://fireflydev.ipac.caltech.edu/firefly-1127-react-18/firefly/
• Just try stuff and see if anything breaks

Important notes about React 18:

• No warning about setState on unmounted components
  • This is ready good news! The warning never made much sense.
  • We could do a lot of clean up in our hooks
• Components can now return undefined
  • No action necessary but we should stay aware of this. It will be an convenience
• useTransition / startTransition (bad naming, I think) are ways to make a component render run at a lower priority, It will not block normal renders
• useDeferredValue is another ways to make component run at a lesser priority. I am not sure I quite understand it yet but I put I am trying it in one compoenent

[loitly]

https://fireflydev.ipac.caltech.edu/firefly-1127-react-18/firefly/test/tests-main.html

• image viewer in test 4 and 5 is no longer working as expected
  Same goes for slate.html

https://fireflydev.ipac.caltech.edu/firefly-1127-react-18/firefly/test/tests-chart.html

• test 1 and 5 is no longer working

https://fireflydev.ipac.caltech.edu/firefly/test/test-hips-mocs.html

• similar to main tests, none of the image viewers work.

https://fireflydev.ipac.caltech.edu/firefly-1127-react-18/firefly/test/test-coverage.html
https://fireflydev.ipac.caltech.edu/firefly/test/test-image.html

• same problem with coverage and image tests

[loitly]

Have you tried adding an ErrorBoundary around the 'viewer' to see if it'll catch all uncaught errors?
It may not work as expected, but it's worth a try. There's very little code needed to make this happen.

const app = React.createElement(viewer,   ...
rootToUse.render(
  <ErrorBoundary>
    {app}
  </ErrorBoundary>,
  
  ...  

[robyww]

I was looking for ErrorBoundary but could not find it in the docs.

[robyww]

I still can't fine it. Can you point me to the docs?

[robyww]

As far as I can tell this is only documented in the legacy API my creating such a component using componentDidCatch() and getDerivedStateFromError(), but this is in what they now call their Legacy React API.

[loitly]

I have no idea whether or not an uncaught exception would propagate to the root rendering. I was only curious to see if you've tried. Below is a 'class' based implementation. There's a functional version as well. If it does, then we can at least intercept it and provide messages with some sort of reset link.

https://legacy.reactjs.org/docs/error-boundaries.html

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

[robyww]

yes, this is what I have found as well. This was added in react 16. They are now acting like it is 'legacy'. Either way it is out of scope for this PR. We could have put this in for the last 2 years. I think it is a different task from the upgrade.

[robyww]

I think there is a problem with loading react in the API. I will look into it

[loitly]

Bug fixed. Good to go.