Migrate classes to functional components

// before
class MyComponent extends React.Component<Props, State> {
// ...
}
 
// after
const MyComponent = () => // ...
 

// before
// declaration
  override state = {
    storeReady: false,
    navigationReady: false,
    animationFinished: false,
  };
// usage
this.setState({...state, storeReady: true}, optionalCallback);
<>{this.state.storeReady}</>
 
// after
// declaration
const [storeReady, setStoreReady] = useState(false);
const [navigationReady, setNavigationReady] = useState(false);
const [animationFinished, setAnimationFinished] = useState(false);
 
// usage
setStoreReady(true);
<>{storeReady}</>
 
// if optionalCallback rethink usage first, or as a quickwin use something similar to https://stackoverflow.com/a/61612292
useEffect(() => {
    if (storeReadyHasChanged) {
      optionalCallback();
    }
  }, [storeReady]);
 

// after
useEffect(() => {
  componentDidMount();
  return () => componentWillUnmount();
}, []);

// before
// class MyComponent...
componenentDidCatch(error, infos) {
  handleError();
  throw error;
}
 
render () {
return <>...</>
}
 
// after
// const MyComponent...
return <MyErrorBoundary>...</MyErrorBoundary>;
 
// + extract another component
class ErrorBoundary extends React.Component {
  override componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    captureException(error);
    throw error;
  }
 
  override render() {
    return this.props.children;
  }
}

// before
const Component = ({derivedState}) => ...
const mapStateToProps = (state) => ({derivedState: selectDerivedState(state)})
connect(mapStateToProps)(Component)
 
// after
const Component = () => {
  const derivedState = useSelector(selectDerivedState)
	return ...
}

// before
withTranslation([i18nNS])(Component)
 
// after
const { t, i18n } = useTranslation([i18nNS]);

const navigation = useNavigation();