Bump React from 16.14.0 to 18.1.0

app/javascript/mastodon/components/__tests__/autosuggest_emoji-test.js

-import React from 'react';
 import renderer from 'react-test-renderer';
 import AutosuggestEmoji from '../autosuggest_emoji';
 

app/javascript/mastodon/components/__tests__/avatar-test.js

-import React from 'react';
 import renderer from 'react-test-renderer';
 import { fromJS } from 'immutable';
 import Avatar from '../avatar';

app/javascript/mastodon/components/__tests__/avatar_overlay-test.js

-import React from 'react';
 import renderer from 'react-test-renderer';
 import { fromJS } from 'immutable';
 import AvatarOverlay from '../avatar_overlay';

app/javascript/mastodon/components/__tests__/button-test.js

 import { render, fireEvent, screen } from '@testing-library/react';
-import React from 'react';
 import renderer from 'react-test-renderer';
 import Button from '../button';
 

app/javascript/mastodon/components/__tests__/display_name-test.js

-import React from 'react';
 import renderer from 'react-test-renderer';
 import { fromJS }  from 'immutable';
 import DisplayName from '../display_name';

app/javascript/mastodon/components/account.js

-import React, { Fragment } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import Avatar from './avatar';
@@ -72,10 +71,10 @@ class Account extends ImmutablePureComponent {
 
     if (hidden) {
       return (
-        <Fragment>
+        <>
           {account.get('display_name')}
           {account.get('username')}
-        </Fragment>
+        </>
       );
     }
 
@@ -103,10 +102,10 @@ class Account extends ImmutablePureComponent {
           hidingNotificationsButton = <IconButton active icon='bell-slash' title={intl.formatMessage(messages.mute_notifications, { name: account.get('username')  })} onClick={this.handleMuteNotifications} />;
         }
         buttons = (
-          <Fragment>
+          <>
             <IconButton active icon='volume-up' title={intl.formatMessage(messages.unmute, { name: account.get('username') })} onClick={this.handleMute} />
             {hidingNotificationsButton}
-          </Fragment>
+          </>
         );
       } else if (defaultAction === 'mute') {
         buttons = <IconButton icon='volume-off' title={intl.formatMessage(messages.mute, { name: account.get('username') })} onClick={this.handleMute} />;

app/javascript/mastodon/components/admin/Counter.js

-import React from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import api from 'mastodon/api';
 import { FormattedNumber } from 'react-intl';
@@ -24,7 +24,7 @@ const percIncrease = (a, b) => {
   return percent;
 };
 
-export default class Counter extends React.PureComponent {
+export default class Counter extends PureComponent {
 
   static propTypes = {
     measure: PropTypes.string.isRequired,
@@ -62,25 +62,25 @@ export default class Counter extends React.PureComponent {
 
     if (loading) {
       content = (
-        <React.Fragment>
+        <>
           <span className='sparkline__value__total'><Skeleton width={43} /></span>
           <span className='sparkline__value__change'><Skeleton width={43} /></span>
-        </React.Fragment>
+        </>
       );
     } else {
       const measure = data[0];
       const percentChange = measure.previous_total && percIncrease(measure.previous_total * 1, measure.total * 1);
 
       content = (
-        <React.Fragment>
+        <>
           <span className='sparkline__value__total'>{measure.human_value || <FormattedNumber value={measure.total} />}</span>
           {measure.previous_total && (<span className={classNames('sparkline__value__change', { positive: percentChange > 0, negative: percentChange < 0 })}>{percentChange > 0 && '+'}<FormattedNumber value={percentChange} style='percent' /></span>)}
-        </React.Fragment>
+        </>
       );
     }
 
     const inner = (
-      <React.Fragment>
+      <>
         <div className='sparkline__value'>
           {content}
         </div>
@@ -96,7 +96,7 @@ export default class Counter extends React.PureComponent {
             </Sparklines>
           )}
         </div>
-      </React.Fragment>
+      </>
     );
 
     if (href) {

app/javascript/mastodon/components/admin/Dimension.js

-import React from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import api from 'mastodon/api';
 import { FormattedNumber } from 'react-intl';
 import { roundTo10 } from 'mastodon/utils/numbers';
 import Skeleton from 'mastodon/components/skeleton';
 
-export default class Dimension extends React.PureComponent {
+export default class Dimension extends PureComponent {
 
   static propTypes = {
     dimension: PropTypes.string.isRequired,

app/javascript/mastodon/components/admin/ReportReasonSelector.js

-import React from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import api from 'mastodon/api';
 import { injectIntl, defineMessages } from 'react-intl';
@@ -10,7 +10,7 @@ const messages = defineMessages({
   violation: { id: 'report.categories.violation', defaultMessage: 'Content violates one or more server rules' },
 });
 
-class Category extends React.PureComponent {
+class Category extends PureComponent {
 
   static propTypes = {
     id: PropTypes.string.isRequired,
@@ -52,7 +52,7 @@ class Category extends React.PureComponent {
 
 }
 
-class Rule extends React.PureComponent {
+class Rule extends PureComponent {
 
   static propTypes = {
     id: PropTypes.string.isRequired,
@@ -85,7 +85,7 @@ class Rule extends React.PureComponent {
 }
 
 export default @injectIntl
-class ReportReasonSelector extends React.PureComponent {
+class ReportReasonSelector extends PureComponent {
 
   static propTypes = {
     id: PropTypes.string.isRequired,

app/javascript/mastodon/components/admin/Retention.js

-import React from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import api from 'mastodon/api';
 import { FormattedMessage, FormattedNumber, FormattedDate } from 'react-intl';
@@ -14,7 +14,7 @@ const dateForCohort = cohort => {
   }
 };
 
-export default class Retention extends React.PureComponent {
+export default class Retention extends PureComponent {
 
   static propTypes = {
     start_at: PropTypes.string,

app/javascript/mastodon/components/admin/Trends.js

-import React from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import api from 'mastodon/api';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import Hashtag from 'mastodon/components/hashtag';
 
-export default class Trends extends React.PureComponent {
+export default class Trends extends PureComponent {
 
   static propTypes = {
     limit: PropTypes.number.isRequired,

app/javascript/mastodon/components/animated_number.js

-import React from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedNumber } from 'react-intl';
 import TransitionMotion from 'react-motion/lib/TransitionMotion';
@@ -15,7 +15,7 @@ const obfuscatedCount = count => {
   }
 };
 
-export default class AnimatedNumber extends React.PureComponent {
+export default class AnimatedNumber extends PureComponent {
 
   static propTypes = {
     value: PropTypes.number.isRequired,
@@ -26,7 +26,7 @@ export default class AnimatedNumber extends React.PureComponent {
     direction: 1,
   };
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     if (nextProps.value > this.props.value) {
       this.setState({ direction: 1 });
     } else if (nextProps.value < this.props.value) {

app/javascript/mastodon/components/attachment_list.js

-import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';

app/javascript/mastodon/components/autosuggest_emoji.js

-import React from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import unicodeMapping from '../features/emoji/emoji_unicode_mapping_light';
 import { assetHost } from 'mastodon/utils/config';
 
-export default class AutosuggestEmoji extends React.PureComponent {
+export default class AutosuggestEmoji extends PureComponent {
 
   static propTypes = {
     emoji: PropTypes.object.isRequired,

app/javascript/mastodon/components/autosuggest_hashtag.js

-import React from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ShortNumber from 'mastodon/components/short_number';
 import { FormattedMessage } from 'react-intl';
 
-export default class AutosuggestHashtag extends React.PureComponent {
+export default class AutosuggestHashtag extends PureComponent {
 
   static propTypes = {
     tag: PropTypes.shape({

app/javascript/mastodon/components/autosuggest_input.js

-import React from 'react';
 import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
 import AutosuggestEmoji from './autosuggest_emoji';
 import AutosuggestHashtag from './autosuggest_hashtag';
@@ -152,7 +151,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
     this.input.focus();
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) {
       this.setState({ suggestionsHidden: false });
     }

app/javascript/mastodon/components/autosuggest_textarea.js

-import React from 'react';
 import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
 import AutosuggestEmoji from './autosuggest_emoji';
 import AutosuggestHashtag from './autosuggest_hashtag';
@@ -152,7 +151,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
     this.textarea.focus();
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) {
       this.setState({ suggestionsHidden: false });
     }

app/javascript/mastodon/components/avatar.js

-import React from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { autoPlayGif } from '../initial_state';
 import classNames from 'classnames';
 
-export default class Avatar extends React.PureComponent {
+export default class Avatar extends PureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map,

app/javascript/mastodon/components/avatar_composite.js

-import React from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { autoPlayGif } from '../initial_state';
 
-export default class AvatarComposite extends React.PureComponent {
+export default class AvatarComposite extends PureComponent {
 
   static propTypes = {
     accounts: ImmutablePropTypes.list.isRequired,

app/javascript/mastodon/components/avatar_overlay.js

-import React from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { autoPlayGif } from '../initial_state';
 
-export default class AvatarOverlay extends React.PureComponent {
+export default class AvatarOverlay extends PureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map.isRequired,