diff --git a/packages/rn-tester/js/components/TextInlineView.js b/packages/rn-tester/js/components/TextInlineView.js
index 360a15a17cb1..c7e884ae2250 100644
--- a/packages/rn-tester/js/components/TextInlineView.js
+++ b/packages/rn-tester/js/components/TextInlineView.js
@@ -12,6 +12,7 @@
 
 import RNTesterText from '../components/RNTesterText';
 import React from 'react';
+import {useState} from 'react';
 import {Image, TouchableHighlight, View} from 'react-native';
 
 function Basic(): React.Node {
@@ -105,116 +106,97 @@ function ClippedByText(): React.Node {
   );
 }
 
-type ChangeSizeState = {|
-  width: number,
-|};
-
-class ChangeImageSize extends React.Component<mixed, ChangeSizeState> {
-  state: ChangeSizeState = {
-    width: 50,
-  };
-
-  render(): React.Node {
-    return (
-      <View>
-        <TouchableHighlight
-          onPress={() => {
-            this.setState({width: this.state.width === 50 ? 100 : 50});
-          }}>
-          <RNTesterText style={{fontSize: 15}}>
-            Change Image Width (width={this.state.width})
-          </RNTesterText>
-        </TouchableHighlight>
-        <RNTesterText>
-          This is an
-          <Image
-            source={{
-              uri: 'https://picsum.photos/50',
-              width: this.state.width,
-              height: 50,
-            }}
-            style={{
-              width: this.state.width,
-              height: 50,
-            }}
-          />
-          inline image
+function ChangeImageSize(): React.Node {
+  const [width, setWidth] = useState(50);
+  return (
+    <View>
+      <TouchableHighlight
+        onPress={() => {
+          setWidth(width === 50 ? 100 : 50);
+        }}>
+        <RNTesterText style={{fontSize: 15}}>
+          Change Image Width (width={width})
         </RNTesterText>
-      </View>
-    );
-  }
+      </TouchableHighlight>
+      <RNTesterText>
+        This is an
+        <Image
+          source={{
+            uri: 'https://picsum.photos/50',
+            width,
+            height: 50,
+          }}
+          style={{
+            width,
+            height: 50,
+          }}
+        />
+        inline image
+      </RNTesterText>
+    </View>
+  );
 }
 
-class ChangeViewSize extends React.Component<mixed, ChangeSizeState> {
-  state: ChangeSizeState = {
-    width: 50,
-  };
+function ChangeViewSize(): React.Node {
+  const [width, setWidth] = useState(50);
+  return (
+    <View>
+      <TouchableHighlight
+        onPress={() => {
+          setWidth(width === 50 ? 100 : 50);
+        }}>
+        <RNTesterText style={{fontSize: 15}}>
+          Change View Width (width={width})
+        </RNTesterText>
+      </TouchableHighlight>
+      <RNTesterText>
+        This is an
+        <View
+          style={{
+            width,
+            height: 50,
+            backgroundColor: 'steelblue',
+          }}
+        />
+        inline view
+      </RNTesterText>
+    </View>
+  );
+}
 
-  render(): React.Node {
-    return (
-      <View>
-        <TouchableHighlight
-          onPress={() => {
-            this.setState({width: this.state.width === 50 ? 100 : 50});
-          }}>
-          <RNTesterText style={{fontSize: 15}}>
-            Change View Width (width={this.state.width})
-          </RNTesterText>
-        </TouchableHighlight>
-        <RNTesterText>
-          This is an
+function ChangeInnerViewSize(): React.Node {
+  const [width, setWidth] = useState(50);
+  return (
+    <View>
+      <TouchableHighlight
+        onPress={() => {
+          setWidth(width === 50 ? 100 : 50);
+        }}>
+        {/* When updating `width`, it's important that the only thing that
+            changes is the width of the pink inline view. When we do this, we
+            demonstrate a bug in RN Android where the pink view doesn't get
+            rerendered and remains at its old size. If other things change
+            (e.g. we display `width` as text somewhere) it could circumvent
+            the bug and cause the pink view to be rerendered at its new size. */}
+        <RNTesterText style={{fontSize: 15}}>
+          Change Pink View Width
+        </RNTesterText>
+      </TouchableHighlight>
+      <RNTesterText>
+        This is an
+        <View style={{width: 125, height: 75, backgroundColor: 'steelblue'}}>
           <View
             style={{
-              width: this.state.width,
+              width,
               height: 50,
-              backgroundColor: 'steelblue',
+              backgroundColor: 'pink',
             }}
           />
-          inline view
-        </RNTesterText>
-      </View>
-    );
-  }
-}
-
-class ChangeInnerViewSize extends React.Component<mixed, ChangeSizeState> {
-  state: ChangeSizeState = {
-    width: 50,
-  };
-
-  render(): React.Node {
-    return (
-      <View>
-        <TouchableHighlight
-          onPress={() => {
-            this.setState({width: this.state.width === 50 ? 100 : 50});
-          }}>
-          {/* When updating `state.width`, it's important that the only thing that
-              changes is the width of the pink inline view. When we do this, we
-              demonstrate a bug in RN Android where the pink view doesn't get
-              rerendered and remains at its old size. If other things change
-              (e.g. we display `state.width` as text somewhere) it could circumvent
-              the bug and cause the pink view to be rerendered at its new size. */}
-          <RNTesterText style={{fontSize: 15}}>
-            Change Pink View Width
-          </RNTesterText>
-        </TouchableHighlight>
-        <RNTesterText>
-          This is an
-          <View style={{width: 125, height: 75, backgroundColor: 'steelblue'}}>
-            <View
-              style={{
-                width: this.state.width,
-                height: 50,
-                backgroundColor: 'pink',
-              }}
-            />
-          </View>
-          inline view
-        </RNTesterText>
-      </View>
-    );
-  }
+        </View>
+        inline view
+      </RNTesterText>
+    </View>
+  );
 }
 
 module.exports = {
diff --git a/packages/rn-tester/js/examples/AppState/AppStateExample.js b/packages/rn-tester/js/examples/AppState/AppStateExample.js
index f4e132ba2d4b..2415cb0c418c 100644
--- a/packages/rn-tester/js/examples/AppState/AppStateExample.js
+++ b/packages/rn-tester/js/examples/AppState/AppStateExample.js
@@ -11,109 +11,90 @@
 'use strict';
 
 import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
-import type {AppStateValues} from 'react-native/Libraries/AppState/AppState';
-import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
 
 import RNTesterText from '../../components/RNTesterText';
 import React from 'react';
+import {useEffect, useState} from 'react';
 import {AppState, Platform, View} from 'react-native';
 
-class AppStateSubscription extends React.Component<
-  $FlowFixMeProps,
-  $FlowFixMeState,
-> {
-  state: {
-    appState: ?string,
-    eventsDetected: Array<string>,
-    memoryWarnings: number,
-    previousAppStates: Array<?(any | string)>,
-  } = {
-    appState: AppState.currentState,
-    previousAppStates: [],
-    memoryWarnings: 0,
-    eventsDetected: [],
-  };
+type Props = {
+  detectEvents?: boolean,
+  showCurrentOnly?: boolean,
+  showMemoryWarnings?: boolean,
+};
 
-  _subscriptions: ?Array<EventSubscription>;
+function AppStateSubscription(props: Props) {
+  const [currentAppState, setCurrentAppState] = useState<?string>(
+    AppState.currentState,
+  );
+  const [previousAppStates, setPreviousAppStates] = useState<string[]>([]);
+  const [memoryWarnings, setMemoryWarnings] = useState<number>(0);
+  const [eventsDetected, setEventsDetected] = useState<string[]>([]);
 
-  componentDidMount() {
-    this._subscriptions = [
-      AppState.addEventListener('change', this._handleAppStateChange),
-      AppState.addEventListener('memoryWarning', this._handleMemoryWarning),
+  useEffect(() => {
+    const subscriptions = [
+      AppState.addEventListener('change', handleAppStateChange),
+      AppState.addEventListener('memoryWarning', handleMemoryWarning),
     ];
+
     if (Platform.OS === 'android') {
-      this._subscriptions.push(
-        AppState.addEventListener('focus', this._handleFocus),
-        AppState.addEventListener('blur', this._handleBlur),
+      subscriptions.push(
+        AppState.addEventListener('focus', handleFocus),
+        AppState.addEventListener('blur', handleBlur),
       );
     }
-  }
 
-  componentWillUnmount() {
-    if (this._subscriptions != null) {
-      for (const subscription of this._subscriptions) {
-        subscription.remove();
-      }
-    }
-  }
+    return () => {
+      subscriptions.forEach(subscription => subscription.remove());
+    };
+  }, []);
 
-  _handleMemoryWarning = () => {
-    this.setState({memoryWarnings: this.state.memoryWarnings + 1});
+  const handleMemoryWarning = () => {
+    setMemoryWarnings(prev => prev + 1);
   };
 
-  _handleBlur = () => {
-    const eventsDetected = this.state.eventsDetected.slice();
-    eventsDetected.push('blur');
-    this.setState({eventsDetected});
+  const handleBlur = () => {
+    setEventsDetected(prev => [...prev, 'blur']);
   };
 
-  _handleFocus = () => {
-    const eventsDetected = this.state.eventsDetected.slice();
-    eventsDetected.push('focus');
-    this.setState({eventsDetected});
+  const handleFocus = () => {
+    setEventsDetected(prev => [...prev, 'focus']);
   };
 
-  _handleAppStateChange = (appState: AppStateValues) => {
-    const previousAppStates = this.state.previousAppStates.slice();
-    previousAppStates.push(this.state.appState);
-    this.setState({
-      appState,
-      previousAppStates,
-    });
+  const handleAppStateChange = (appState: string) => {
+    setPreviousAppStates(prev => [...prev, appState]);
+    setCurrentAppState(appState);
   };
 
-  render(): React.Node {
-    if (this.props.showMemoryWarnings) {
-      return (
-        <View>
-          <RNTesterText>{this.state.memoryWarnings}</RNTesterText>
-        </View>
-      );
-    }
-    if (this.props.showCurrentOnly) {
-      return (
-        <View>
-          <RNTesterText>{this.state.appState}</RNTesterText>
-        </View>
-      );
-    }
-    if (this.props.detectEvents) {
-      return (
-        <View>
-          <RNTesterText>
-            {JSON.stringify(this.state.eventsDetected)}
-          </RNTesterText>
-        </View>
-      );
-    }
+  if (props.showMemoryWarnings) {
+    return (
+      <View>
+        <RNTesterText>{memoryWarnings}</RNTesterText>
+      </View>
+    );
+  }
+
+  if (props.showCurrentOnly) {
+    return (
+      <View>
+        <RNTesterText>{currentAppState}</RNTesterText>
+      </View>
+    );
+  }
+
+  if (props.detectEvents) {
     return (
       <View>
-        <RNTesterText>
-          {JSON.stringify(this.state.previousAppStates)}
-        </RNTesterText>
+        <RNTesterText>{JSON.stringify(eventsDetected)}</RNTesterText>
       </View>
     );
   }
+
+  return (
+    <View>
+      <RNTesterText>{JSON.stringify(previousAppStates)}</RNTesterText>
+    </View>
+  );
 }
 
 exports.title = 'AppState';
diff --git a/packages/rn-tester/js/examples/OrientationChange/OrientationChangeExample.js b/packages/rn-tester/js/examples/OrientationChange/OrientationChangeExample.js
index d7903ef3351e..a6da8817b56a 100644
--- a/packages/rn-tester/js/examples/OrientationChange/OrientationChangeExample.js
+++ b/packages/rn-tester/js/examples/OrientationChange/OrientationChangeExample.js
@@ -10,51 +10,41 @@
 
 import RNTesterText from '../../components/RNTesterText';
 import React from 'react';
+import {useEffect, useState} from 'react';
 import {DeviceEventEmitter, View} from 'react-native';
-import {type EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
 
-class OrientationChangeExample extends React.Component<{...}, $FlowFixMeState> {
-  _orientationSubscription: EventSubscription;
-
-  state:
-    | any
-    | {
-        currentOrientation: string,
-        isLandscape: boolean,
-        orientationDegrees: number,
-      } = {
+const OrientationChangeExample = (): React.Node => {
+  const [state, setState] = useState({
     currentOrientation: '',
     orientationDegrees: 0,
     isLandscape: false,
-  };
-
-  componentDidMount() {
-    this._orientationSubscription = DeviceEventEmitter.addListener(
+  });
+
+  useEffect(() => {
+    const onOrientationChange = (orientation: Object) => {
+      setState({
+        currentOrientation: orientation.name,
+        orientationDegrees: orientation.rotationDegrees,
+        isLandscape: orientation.isLandscape,
+      });
+    };
+
+    const orientationSubscription = DeviceEventEmitter.addListener(
       'namedOrientationDidChange',
-      this._onOrientationChange,
+      onOrientationChange,
     );
-  }
-
-  componentWillUnmount() {
-    this._orientationSubscription.remove();
-  }
 
-  _onOrientationChange = (orientation: Object) => {
-    this.setState({
-      currentOrientation: orientation.name,
-      orientationDegrees: orientation.rotationDegrees,
-      isLandscape: orientation.isLandscape,
-    });
-  };
-
-  render(): React.Node {
-    return (
-      <View>
-        <RNTesterText>{JSON.stringify(this.state)}</RNTesterText>
-      </View>
-    );
-  }
-}
+    return () => {
+      orientationSubscription.remove();
+    };
+  }, []);
+
+  return (
+    <View>
+      <RNTesterText>{JSON.stringify(state)}</RNTesterText>
+    </View>
+  );
+};
 
 exports.title = 'OrientationChangeExample';
 exports.category = 'Basic';