diff --git a/frontend/javascripts/components/disable_generic_dnd.ts b/frontend/javascripts/components/disable_generic_dnd.ts
index 9d3f618a4b..6647d82f64 100644
--- a/frontend/javascripts/components/disable_generic_dnd.ts
+++ b/frontend/javascripts/components/disable_generic_dnd.ts
@@ -1,22 +1,20 @@
 import window from "libs/window";
 import React from "react";
-import type { EmptyObject } from "types/globals";
-export default class DisableGenericDnd extends React.Component<EmptyObject> {
-  componentDidMount() {
-    window.addEventListener("dragover", this.preventDefault, false);
-    window.addEventListener("drop", this.preventDefault, false);
-  }
 
-  componentWillUnmount() {
-    window.removeEventListener("dragover", this.preventDefault);
-    window.removeEventListener("drop", this.preventDefault);
-  }
+const preventDefault = (e: Event) => {
+  e.preventDefault();
+};
 
-  preventDefault = (e: Event) => {
-    e.preventDefault();
-  };
+export default function DisableGenericDnd() {
+  React.useEffect(() => {
+    window.addEventListener("dragover", preventDefault, false);
+    window.addEventListener("drop", preventDefault, false);
 
-  render() {
-    return null;
-  }
+    return () => {
+      window.removeEventListener("dragover", preventDefault);
+      window.removeEventListener("drop", preventDefault);
+    };
+  }, []);
+
+  return null;
 }
diff --git a/frontend/javascripts/components/fixed_expandable_table.tsx b/frontend/javascripts/components/fixed_expandable_table.tsx
index 372013692f..9c0a912c20 100644
--- a/frontend/javascripts/components/fixed_expandable_table.tsx
+++ b/frontend/javascripts/components/fixed_expandable_table.tsx
@@ -1,11 +1,8 @@
 import { Button, Table, type TableProps } from "antd";
-import type { ColumnsType, GetRowKey } from "antd/lib/table/interface";
-import React from "react";
+import type { ColumnsType, ExpandableConfig, GetRowKey } from "antd/lib/table/interface";
+import type React from "react";
+import { useEffect, useState } from "react";
 
-type State = {
-  expandedRows: Array<string>;
-  className?: string;
-};
 /** This is a wrapper for large tables that have fixed columns and support expanded rows.
  *  This wrapper ensures that when rows are expanded no column is fixed as this creates rendering bugs.
  *  If you are using this wrapper, you do not need to set the class "large-table"
@@ -17,72 +14,73 @@ type OwnTableProps<RecordType = any> = TableProps<RecordType> & {
   columns: ColumnsType<RecordType>;
 };
 
-const EMPTY_ARRAY: string[] = [] as const;
+const EMPTY_ARRAY: React.Key[] = [] as const;
 
-export default class FixedExpandableTable extends React.PureComponent<OwnTableProps, State> {
-  state: State = {
-    expandedRows: EMPTY_ARRAY,
-  };
+const getAllRowIds = (
+  dataSource: readonly any[] | undefined,
+  rowKey: string | number | symbol | GetRowKey<any> | undefined,
+) => {
+  const canUseRowKey = typeof rowKey === "string";
+  return dataSource != null && canUseRowKey ? dataSource.map((row) => row[rowKey]) : [];
+};
+
+export default function FixedExpandableTable<RecordType>({
+  className,
+  expandable,
+  dataSource,
+  rowKey,
+  columns,
+  ...restProps
+}: OwnTableProps<RecordType>) {
+  const [expandedRows, setExpandedRows] = useState<React.Key[]>(EMPTY_ARRAY);
 
-  getAllRowIds(
-    dataSource: readonly any[] | undefined,
-    rowKey: string | number | symbol | GetRowKey<any> | undefined,
-  ) {
-    const canUseRowKey = typeof rowKey === "string";
-    return dataSource != null && canUseRowKey ? dataSource.map((row) => row[rowKey]) : [];
-  }
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Collapse all rows when source changes
+  useEffect(() => {
+    setExpandedRows(EMPTY_ARRAY);
+  }, [dataSource]);
 
-  componentDidUpdate(prevProps: Readonly<TableProps<any>>): void {
-    if (prevProps.dataSource !== this.props.dataSource) {
-      this.setState({ expandedRows: EMPTY_ARRAY });
-    }
-  }
+  const areAllRowsExpanded = dataSource != null && expandedRows.length === dataSource?.length;
 
-  render() {
-    const { expandedRows } = this.state;
-    const { className, expandable, ...restProps } = this.props;
-    const { dataSource, rowKey } = this.props;
-    const areAllRowsExpanded =
-      dataSource != null && this.state.expandedRows.length === dataSource?.length;
+  const columnTitleCollapsed = (
+    <Button
+      className="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
+      title="Expand all rows"
+      onClick={() => setExpandedRows(getAllRowIds(dataSource, rowKey))}
+    />
+  );
+  const columnTitleExpanded = (
+    <Button
+      className="ant-table-row-expand-icon ant-table-row-expand-icon-expanded"
+      title="Collapse all rows"
+      onClick={() => setExpandedRows(EMPTY_ARRAY)}
+    />
+  );
+
+  const columnsWithAdjustedFixedProp = columns.map((column) => {
+    const columnFixed = expandedRows.length > 0 ? false : column.fixed;
+    return { ...column, fixed: columnFixed };
+  });
+
+  const expandableProp: ExpandableConfig<RecordType> = {
+    ...expandable,
+    expandedRowKeys: expandedRows,
+    onExpandedRowsChange: (selectedRows: readonly React.Key[]) => {
+      setExpandedRows(selectedRows as React.Key[]);
+    },
+    columnTitle: areAllRowsExpanded ? columnTitleExpanded : columnTitleCollapsed,
+  };
 
-    const columnTitleCollapsed = (
-      <Button
-        className="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
-        title="Expand all rows"
-        onClick={() => this.setState({ expandedRows: this.getAllRowIds(dataSource, rowKey) })}
-      />
-    );
-    const columnTitleExpanded = (
-      <Button
-        className="ant-table-row-expand-icon ant-table-row-expand-icon-expanded"
-        title="Collapse all rows"
-        onClick={() => this.setState({ expandedRows: EMPTY_ARRAY })}
-      />
-    );
-    const columnsWithAdjustedFixedProp: TableProps["columns"] = this.props.columns.map((column) => {
-      const columnFixed = expandedRows.length > 0 ? false : column.fixed;
-      return { ...column, fixed: columnFixed };
-    });
-    const expandableProp = {
-      ...expandable,
-      expandedRowKeys: expandedRows,
-      onExpandedRowsChange: (selectedRows: readonly React.Key[]) => {
-        this.setState({
-          expandedRows: selectedRows as string[],
-        });
-      },
-      columnTitle: areAllRowsExpanded ? columnTitleExpanded : columnTitleCollapsed,
-    };
-    return (
-      <Table
-        {...restProps}
-        expandable={expandableProp}
-        scroll={{
-          x: "max-content",
-        }}
-        className={`large-table ${className}`}
-        columns={columnsWithAdjustedFixedProp}
-      />
-    );
-  }
+  return (
+    <Table
+      {...restProps}
+      dataSource={dataSource}
+      rowKey={rowKey}
+      expandable={expandableProp}
+      scroll={{
+        x: "max-content",
+      }}
+      className={`large-table ${className}`}
+      columns={columnsWithAdjustedFixedProp}
+    />
+  );
 }
diff --git a/frontend/javascripts/components/highlightable_row.tsx b/frontend/javascripts/components/highlightable_row.tsx
index 8a95976fcc..cc23b497df 100644
--- a/frontend/javascripts/components/highlightable_row.tsx
+++ b/frontend/javascripts/components/highlightable_row.tsx
@@ -1,33 +1,28 @@
-import * as React from "react";
+import type React from "react";
+import { useState } from "react";
+
 type Props = {
   shouldHighlight: boolean;
   children: React.ReactNode;
   style?: Record<string, any>;
 };
-type State = {
-  persistedShouldHighlight: boolean;
-}; // This component is able to highlight a newly rendered row.
+
+// This component is able to highlight a newly rendered row.
 // Internally, it persists the initially passed props, since that
 // prop can change faster than the animation is executed. Not saving
 // the initial prop, would abort the animation too early.
+export default function HighlightableRow({ shouldHighlight, style, ...restProps }: Props) {
+  const [persistedShouldHighlight] = useState(shouldHighlight);
 
-export default class HighlightableRow extends React.PureComponent<Props, State> {
-  state: State = {
-    persistedShouldHighlight: this.props.shouldHighlight,
-  };
-
-  render() {
-    const { shouldHighlight, style, ...restProps } = this.props;
-    return (
-      <tr
-        {...restProps}
-        style={{
-          ...style,
-          animation: this.state.persistedShouldHighlight ? "highlight-background 2.0s ease" : "",
-        }}
-      >
-        {this.props.children}
-      </tr>
-    );
-  }
+  return (
+    <tr
+      {...restProps}
+      style={{
+        ...style,
+        animation: persistedShouldHighlight ? "highlight-background 2.0s ease" : "",
+      }}
+    >
+      {restProps.children}
+    </tr>
+  );
 }
diff --git a/frontend/javascripts/components/loop.ts b/frontend/javascripts/components/loop.ts
index a529c21a58..01a1ca557f 100644
--- a/frontend/javascripts/components/loop.ts
+++ b/frontend/javascripts/components/loop.ts
@@ -1,28 +1,21 @@
 import window from "libs/window";
-import { Component } from "react";
-import type { EmptyObject } from "types/globals";
+import { useCallback, useEffect } from "react";
+
 type LoopProps = {
   interval: number;
   onTick: (...args: Array<any>) => any;
 };
 
-class Loop extends Component<LoopProps, EmptyObject> {
-  intervalId: number | null | undefined = null;
+export default function Loop({ interval, onTick }: LoopProps) {
+  const _onTick = useCallback(onTick, []);
 
-  componentDidMount() {
-    this.intervalId = window.setInterval(this.props.onTick, this.props.interval);
-  }
+  useEffect(() => {
+    const intervalId = window.setInterval(_onTick, interval);
 
-  componentWillUnmount() {
-    if (this.intervalId != null) {
-      window.clearInterval(this.intervalId);
-      this.intervalId = null;
-    }
-  }
+    return () => {
+      window.clearInterval(intervalId);
+    };
+  }, [interval, _onTick]);
 
-  render() {
-    return null;
-  }
+  return null;
 }
-
-export default Loop;
diff --git a/frontend/javascripts/components/select_experience_domain.tsx b/frontend/javascripts/components/select_experience_domain.tsx
index 2f8db125bb..baaa51dc36 100644
--- a/frontend/javascripts/components/select_experience_domain.tsx
+++ b/frontend/javascripts/components/select_experience_domain.tsx
@@ -1,7 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
 import { getExistingExperienceDomains } from "admin/rest_api";
 import { Select, Tooltip } from "antd";
-import * as React from "react";
+import type React from "react";
+import { useState } from "react";
 import type { ExperienceDomainList } from "types/api_types";
+
 type Props = {
   value?: string | Array<string>;
   width: number;
@@ -10,93 +13,70 @@ type Props = {
   disabled: boolean;
   onSelect?: (arg0: string) => void;
   onChange?: () => void;
-  allowCreation: boolean;
-  alreadyUsedDomains: ExperienceDomainList;
-};
-type State = {
-  domains: ExperienceDomainList;
-  currentlyEnteredDomain: string;
+  allowCreation?: boolean;
+  alreadyUsedDomains?: ExperienceDomainList;
 };
 
-class SelectExperienceDomain extends React.PureComponent<Props, State> {
-  static defaultProps = {
-    alreadyUsedDomains: [],
-    allowCreation: false,
-  };
+const SelectExperienceDomain: React.FC<Props> = ({
+  value,
+  notFoundContent,
+  width,
+  disabled,
+  placeholder,
+  onSelect,
+  onChange,
+  allowCreation = false,
+  alreadyUsedDomains = [],
+}) => {
+  const { data: domains = [] } = useQuery({
+    queryKey: ["experienceDomains"],
+    queryFn: getExistingExperienceDomains,
+  });
+  const [currentlyEnteredDomain, setCurrentlyEnteredDomain] = useState("");
 
-  state = {
-    domains: [],
-    currentlyEnteredDomain: "",
+  const getUnusedDomains = (): ExperienceDomainList => {
+    return domains.filter((domain) => !alreadyUsedDomains.includes(domain));
   };
 
-  componentDidMount() {
-    this.fetchData();
-  }
-
-  async fetchData() {
-    this.setState({
-      domains: await getExistingExperienceDomains(),
-    });
-  }
-
-  getUnusedDomains(): ExperienceDomainList {
-    return this.state.domains.filter((domain) => !this.props.alreadyUsedDomains.includes(domain));
-  }
-
-  onSearch = (domain: string) => {
-    this.setState({
-      currentlyEnteredDomain: domain,
-    });
+  const onSearch = (domain: string) => {
+    setCurrentlyEnteredDomain(domain);
   };
 
-  render() {
-    const {
-      value,
-      notFoundContent,
-      width,
-      disabled,
-      placeholder,
-      onSelect,
-      onChange,
-      allowCreation,
-    } = this.props;
-    const { currentlyEnteredDomain } = this.state;
-    let options = this.getUnusedDomains();
+  let options = getUnusedDomains();
 
-    if (
-      allowCreation &&
-      !options.includes(currentlyEnteredDomain) &&
-      currentlyEnteredDomain.trim() !== ""
-    ) {
-      options = [...options, currentlyEnteredDomain];
-    }
+  if (
+    allowCreation &&
+    !options.includes(currentlyEnteredDomain) &&
+    currentlyEnteredDomain.trim() !== ""
+  ) {
+    options = [...options, currentlyEnteredDomain];
+  }
 
-    return (
-      <Tooltip
-        placement="top"
-        title="Select an existing experience domain or create a new one by typing its name in this input field."
+  return (
+    <Tooltip
+      placement="top"
+      title="Select an existing experience domain or create a new one by typing its name in this input field."
+    >
+      <Select
+        showSearch
+        value={value}
+        optionFilterProp="children"
+        notFoundContent={notFoundContent}
+        style={{
+          width: `${width}%`,
+        }}
+        disabled={disabled}
+        placeholder={placeholder}
+        onSelect={onSelect}
+        onChange={onChange}
+        onSearch={onSearch}
       >
-        <Select
-          showSearch
-          value={value}
-          optionFilterProp="children"
-          notFoundContent={notFoundContent}
-          style={{
-            width: `${width}%`,
-          }}
-          disabled={disabled}
-          placeholder={placeholder}
-          onSelect={onSelect}
-          onChange={onChange}
-          onSearch={this.onSearch}
-        >
-          {options.map((domain) => (
-            <Select.Option key={domain}>{domain}</Select.Option>
-          ))}
-        </Select>
-      </Tooltip>
-    );
-  }
-}
+        {options.map((domain) => (
+          <Select.Option key={domain}>{domain}</Select.Option>
+        ))}
+      </Select>
+    </Tooltip>
+  );
+};
 
 export default SelectExperienceDomain;
diff --git a/frontend/javascripts/components/text_with_description.tsx b/frontend/javascripts/components/text_with_description.tsx
index 1abe4e8166..7b559b1bb7 100644
--- a/frontend/javascripts/components/text_with_description.tsx
+++ b/frontend/javascripts/components/text_with_description.tsx
@@ -1,6 +1,6 @@
 import { Popover, Tooltip } from "antd";
 import Markdown from "libs/markdown_adapter";
-import * as React from "react";
+import type React from "react";
 import type { EditableTextLabelProp } from "viewer/view/components/editable_text_label";
 import EditableTextLabel from "viewer/view/components/editable_text_label";
 
@@ -16,69 +16,66 @@ type NonEditableProps = {
 };
 type Props = EditableProps | NonEditableProps;
 
-class TextWithDescription extends React.PureComponent<Props> {
-  render() {
-    const { isEditable, description, ...editableProps } = this.props;
-    const hasDescription = description !== "";
-    const markdownDescription = (
-      <div
-        style={{
-          maxWidth: 400,
-        }}
-      >
-        <Markdown>{description}</Markdown>
-      </div>
-    );
-    return (
+const TextWithDescription: React.FC<Props> = (props) => {
+  const { isEditable, description, ...editableProps } = props;
+  const hasDescription = description !== "";
+  const markdownDescription = (
+    <div
+      style={{
+        maxWidth: 400,
+      }}
+    >
+      <Markdown>{description}</Markdown>
+    </div>
+  );
+  return (
+    <span
+      className={hasDescription ? "flex-container" : ""}
+      style={{
+        alignItems: "center",
+      }}
+    >
       <span
-        className={hasDescription ? "flex-container" : ""}
+        className={hasDescription ? "flex-item" : ""}
         style={{
-          alignItems: "center",
+          flexGrow: 0,
         }}
       >
-        <span
-          className={hasDescription ? "flex-item" : ""}
-          style={{
-            flexGrow: 0,
-          }}
-        >
-          {hasDescription ? (
-            <Tooltip title="Show description" placement="bottom">
-              <Popover title="Description" trigger="click" content={markdownDescription}>
-                <i
-                  className="fas fa-align-justify"
-                  style={{
-                    cursor: "pointer",
-                  }}
-                />
-              </Popover>
-            </Tooltip>
-          ) : null}
-        </span>
-        <span className={hasDescription ? "flex-item" : undefined}>
-          {isEditable ? (
-            // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
-            <EditableTextLabel {...editableProps} />
-          ) : (
-            <span
-              style={{
-                margin: "0 10px",
-                display: "inline-block",
-              }}
-            >
-              {this.props.markdown ? (
-                <span>
-                  <Markdown>{this.props.value}</Markdown>
-                </span>
-              ) : (
-                this.props.value
-              )}
-            </span>
-          )}
-        </span>
+        {hasDescription ? (
+          <Tooltip title="Show description" placement="bottom">
+            <Popover title="Description" trigger="click" content={markdownDescription}>
+              <i
+                className="fas fa-align-justify"
+                style={{
+                  cursor: "pointer",
+                }}
+              />
+            </Popover>
+          </Tooltip>
+        ) : null}
       </span>
-    );
-  }
-}
+      <span className={hasDescription ? "flex-item" : undefined}>
+        {isEditable ? (
+          <EditableTextLabel {...(editableProps as EditableTextLabelProp)} />
+        ) : (
+          <span
+            style={{
+              margin: "0 10px",
+              display: "inline-block",
+            }}
+          >
+            {(props as NonEditableProps).markdown ? (
+              <span>
+                <Markdown>{(props as NonEditableProps).value}</Markdown>
+              </span>
+            ) : (
+              (props as NonEditableProps).value
+            )}
+          </span>
+        )}
+      </span>
+    </span>
+  );
+};
 
 export default TextWithDescription;
diff --git a/frontend/javascripts/libs/shortcut_component.ts b/frontend/javascripts/libs/shortcut_component.ts
index 6d9ff1add0..2c367e1574 100644
--- a/frontend/javascripts/libs/shortcut_component.ts
+++ b/frontend/javascripts/libs/shortcut_component.ts
@@ -1,5 +1,5 @@
 import { InputKeyboard, InputKeyboardNoLoop } from "libs/input";
-import * as React from "react";
+import { useEffect } from "react";
 // This component provides a lightweight wrapper around the input library.
 // It leverages reacts lifecycle hooks to allow rendering-sensitive activation of shortcuts.
 type Props = {
@@ -8,26 +8,21 @@ type Props = {
   supportLoop?: boolean;
   supportInputElements?: boolean;
 };
-export default class Shortcut extends React.Component<Props> {
-  // @ts-expect-error ts-migrate(2564) FIXME: Property 'keyboardNoLoop' has no initializer and i... Remove this comment to see the full error message
-  keyboardNoLoop: InputKeyboardNoLoop | InputKeyboard;
-
-  componentDidMount() {
-    this.keyboardNoLoop = new (this.props.supportLoop ? InputKeyboard : InputKeyboardNoLoop)(
+export default function Shortcut(props: Props) {
+  useEffect(() => {
+    const keyboard = new (props.supportLoop ? InputKeyboard : InputKeyboardNoLoop)(
       {
-        [this.props.keys]: this.props.onTrigger,
+        [props.keys]: props.onTrigger,
       },
       {
-        supportInputElements: this.props.supportInputElements,
+        supportInputElements: props.supportInputElements,
       },
     );
-  }
 
-  componentWillUnmount() {
-    this.keyboardNoLoop.destroy();
-  }
+    return () => {
+      keyboard.destroy();
+    };
+  }, [props.keys, props.onTrigger, props.supportLoop, props.supportInputElements]);
 
-  render() {
-    return null;
-  }
+  return null;
 }