diff --git a/newsfeed/babel.config.json b/newsfeed/babel.config.json
index 4f014be9..51239243 100644
--- a/newsfeed/babel.config.json
+++ b/newsfeed/babel.config.json
@@ -1,4 +1,12 @@
 {
-  "presets": ["@babel/preset-react", "@babel/preset-typescript"],
+  "presets": [
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
   "plugins": ["relay"]
 }
diff --git a/newsfeed/server/resolvers.mjs b/newsfeed/server/resolvers.mjs
index b792248a..92cfe35b 100644
--- a/newsfeed/server/resolvers.mjs
+++ b/newsfeed/server/resolvers.mjs
@@ -142,7 +142,8 @@ const nodes = [
     id: "99",
     category: "NEWS",
     title: "Study: The egg came first, but only after the chicken",
-    summary: 'In a shocking new study, scientists have finally determined the age-old question of whether the chicken or the egg came first. And it turns out, the answer is both!\n      According to the research, the egg actually came first — but only after the chicken had already laid it.\n      \n      "We were amazed by the results," said lead researcher Dr. Janet Hennessy. "It seems that the chicken somehow managed to lay an egg before it even existed. It\'s a real chicken-and-egg paradox."\n      \n      The study, which involved observing hundreds of chickens on a farm, found that the birds would lay eggs and then, a short time later, a fully-formed chicken would emerge from the shell.\n      \n      "We always thought that the egg came first and the chicken was born from it," said Hennessy. "But it turns out, the chicken was there all along, just waiting to hatch."\n      \n      The findings have caused quite a stir in the scientific community, with many experts calling for further research to be done on the mysterious life cycle of the chicken.\n      \n      "It\'s a groundbreaking discovery that will change the way we think about the chicken and the egg," said Hennessy. "Who knows what other secrets these amazing creatures may be hiding?"',
+    summary:
+      'In a shocking new study, scientists have finally determined the age-old question of whether the chicken or the egg came first. And it turns out, the answer is both!\n      According to the research, the egg actually came first — but only after the chicken had already laid it.\n      \n      "We were amazed by the results," said lead researcher Dr. Janet Hennessy. "It seems that the chicken somehow managed to lay an egg before it even existed. It\'s a real chicken-and-egg paradox."\n      \n      The study, which involved observing hundreds of chickens on a farm, found that the birds would lay eggs and then, a short time later, a fully-formed chicken would emerge from the shell.\n      \n      "We always thought that the egg came first and the chicken was born from it," said Hennessy. "But it turns out, the chicken was there all along, just waiting to hatch."\n      \n      The findings have caused quite a stir in the scientific community, with many experts calling for further research to be done on the mysterious life cycle of the chicken.\n      \n      "It\'s a groundbreaking discovery that will change the way we think about the chicken and the egg," said Hennessy. "Who knows what other secrets these amazing creatures may be hiding?"',
     authorID: "30",
     createdAt: "2020-01-01T00:00:00.000Z",
     attachments: [
diff --git a/newsfeed/src/components/App.tsx b/newsfeed/src/components/App.tsx
index 4d04c1a3..77e07420 100644
--- a/newsfeed/src/components/App.tsx
+++ b/newsfeed/src/components/App.tsx
@@ -1,16 +1,17 @@
-import * as React from "react";
+import { Suspense } from "react";
+
 import RelayEnvironment from "../relay/RelayEnvironment";
-import Newsfeed from "./Newsfeed";
 import LoadingSpinner from "./LoadingSpinner";
+import Newsfeed from "./Newsfeed";
 
-export default function App(): React.ReactElement {
+export default function App() {
   return (
     <RelayEnvironment>
-      <React.Suspense fallback={<LoadingSpinner />}>
+      <Suspense fallback={<LoadingSpinner />}>
         <div className="app">
           <Newsfeed />
         </div>
-      </React.Suspense>
+      </Suspense>
     </RelayEnvironment>
   );
 }
diff --git a/newsfeed/src/components/Card.tsx b/newsfeed/src/components/Card.tsx
index 58668d98..a2e29107 100644
--- a/newsfeed/src/components/Card.tsx
+++ b/newsfeed/src/components/Card.tsx
@@ -1,11 +1,11 @@
-import * as React from "react";
+import { ReactNode } from "react";
 
 export default function Card({
   children,
   dim,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   dim?: boolean;
-}): React.ReactElement {
+}) {
   return <div className={"card" + (dim ? " dim" : "")}>{children}</div>;
 }
diff --git a/newsfeed/src/components/CategorySelector.tsx b/newsfeed/src/components/CategorySelector.tsx
index e56feede..49093021 100644
--- a/newsfeed/src/components/CategorySelector.tsx
+++ b/newsfeed/src/components/CategorySelector.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import SmallSpinner from "./SmallSpinner";
 
 // In a real app this would be imported from NewsfeedQuery.graphql; it is only defined
@@ -18,7 +17,7 @@ export default function CategorySelector({
   value: Category;
   onChange: (newValue: Category) => void;
   isPending?: boolean;
-}): React.ReactElement {
+}) {
   return (
     <div>
       <select value={value} onChange={(e) => onChange(coerce(e.target.value))}>
diff --git a/newsfeed/src/components/Comment.tsx b/newsfeed/src/components/Comment.tsx
index 3384f996..4ffa8144 100644
--- a/newsfeed/src/components/Comment.tsx
+++ b/newsfeed/src/components/Comment.tsx
@@ -1,10 +1,8 @@
-import * as React from "react";
+import { useFragment } from "react-relay";
+import { graphql } from "relay-runtime";
 
 import type { CommentFragment$key } from "./__generated__/CommentFragment.graphql";
 
-import { graphql } from "relay-runtime";
-import { useFragment } from "react-relay";
-
 const CommentFragment = graphql`
   fragment CommentFragment on Comment {
     text
@@ -15,7 +13,7 @@ type Props = {
   comment: CommentFragment$key;
 };
 
-export default function Comment({ comment }: Props): React.ReactElement {
+export default function Comment({ comment }: Props) {
   const data = useFragment(CommentFragment, comment);
   return <div className="comment">{data.text}</div>;
 }
diff --git a/newsfeed/src/components/Heading.tsx b/newsfeed/src/components/Heading.tsx
index 901c2797..af904de6 100644
--- a/newsfeed/src/components/Heading.tsx
+++ b/newsfeed/src/components/Heading.tsx
@@ -1,9 +1,5 @@
-import * as React from "react";
+import { ReactNode } from "react";
 
-export default function Heading({
-  children,
-}: {
-  children: React.ReactNode;
-}): React.ReactElement {
+export default function Heading({ children }: { children: ReactNode }) {
   return <h2 className="heading">{children}</h2>;
 }
diff --git a/newsfeed/src/components/Hovercard.tsx b/newsfeed/src/components/Hovercard.tsx
index 7e3535d7..d9faf606 100644
--- a/newsfeed/src/components/Hovercard.tsx
+++ b/newsfeed/src/components/Hovercard.tsx
@@ -1,8 +1,7 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import LoadingSpinner from "./LoadingSpinner";
+import { Suspense, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 
-const { useEffect, useState } = React;
+import LoadingSpinner from "./LoadingSpinner";
 
 export type Props = {
   children: React.ReactElement;
@@ -40,7 +39,7 @@ export default function Hovercard({
   if (!hoverState) {
     return null;
   }
-  return ReactDOM.createPortal(
+  return createPortal(
     <div
       className="hovercard"
       style={{
@@ -48,7 +47,7 @@ export default function Hovercard({
         left: hoverState.x + "px",
       }}
     >
-      <React.Suspense fallback={<LoadingSpinner />}>{children}</React.Suspense>
+      <Suspense fallback={<LoadingSpinner />}>{children}</Suspense>
     </div>,
     document.body
   );
diff --git a/newsfeed/src/components/Image.tsx b/newsfeed/src/components/Image.tsx
index c6e5851e..6b4601f3 100644
--- a/newsfeed/src/components/Image.tsx
+++ b/newsfeed/src/components/Image.tsx
@@ -1,5 +1,3 @@
-import * as React from "react";
-
 type Props = {
   image: {
     url: string;
@@ -9,12 +7,7 @@ type Props = {
   className?: string;
 };
 
-export default function Image({
-  image,
-  width,
-  height,
-  className,
-}: Props): React.ReactElement {
+export default function Image({ image, width, height, className }: Props) {
   if (image == null) {
     return null;
   }
diff --git a/newsfeed/src/components/LoadMoreCommentsButton.tsx b/newsfeed/src/components/LoadMoreCommentsButton.tsx
index 4a703799..049406f5 100644
--- a/newsfeed/src/components/LoadMoreCommentsButton.tsx
+++ b/newsfeed/src/components/LoadMoreCommentsButton.tsx
@@ -1,14 +1,9 @@
-import * as React from "react";
-
 type Props = {
   onClick: () => void;
   disabled?: boolean;
 };
 
-export default function LoadMoreCommentsButton({
-  onClick,
-  disabled,
-}: Props): React.ReactElement {
+export default function LoadMoreCommentsButton({ onClick, disabled }: Props) {
   return (
     <button
       onClick={onClick}
diff --git a/newsfeed/src/components/LoadingSpinner.tsx b/newsfeed/src/components/LoadingSpinner.tsx
index 50b621cc..67e56aa5 100644
--- a/newsfeed/src/components/LoadingSpinner.tsx
+++ b/newsfeed/src/components/LoadingSpinner.tsx
@@ -1,6 +1,4 @@
-import * as React from "react";
-
-export default function LoadingSpinner({}): React.ReactElement {
+export default function LoadingSpinner({}) {
   return (
     <div className="loading-spinner-wrapper">
       <div className="loading-spinner">
diff --git a/newsfeed/src/components/Newsfeed.tsx b/newsfeed/src/components/Newsfeed.tsx
index 8b6a43a5..c60f221b 100644
--- a/newsfeed/src/components/Newsfeed.tsx
+++ b/newsfeed/src/components/Newsfeed.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import Story from "./Story";
 
 export default function Newsfeed() {
diff --git a/newsfeed/src/components/OrganizationKind.tsx b/newsfeed/src/components/OrganizationKind.tsx
index 6119e045..523c7391 100644
--- a/newsfeed/src/components/OrganizationKind.tsx
+++ b/newsfeed/src/components/OrganizationKind.tsx
@@ -1,8 +1,3 @@
-import * as React from "react";
-
-import { graphql } from "relay-runtime";
-import { useFragment } from "react-relay";
-
 // In a real app this would be imported from PosterBylineFragment.graphql; it is only defined
 // separately here to make the step-by-step examples work when partially completed.
 type OrganizationKind =
@@ -16,9 +11,7 @@ type Props = {
   kind: OrganizationKind;
 };
 
-export default function OrganizationKind({
-  kind,
-}: Props): React.ReactElement {
+export default function OrganizationKind({ kind }: Props) {
   return <div className="byline__detail">{label(kind)}</div>;
 }
 
diff --git a/newsfeed/src/components/PosterByline.tsx b/newsfeed/src/components/PosterByline.tsx
index 60a36540..2836a44c 100644
--- a/newsfeed/src/components/PosterByline.tsx
+++ b/newsfeed/src/components/PosterByline.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import Image from "./Image";
 
 export type Props = {
@@ -10,7 +9,7 @@ export type Props = {
   };
 };
 
-export default function PosterByline({ poster }: Props): React.ReactElement {
+export default function PosterByline({ poster }: Props) {
   if (poster == null) {
     return null;
   }
diff --git a/newsfeed/src/components/PosterBylineLocation.tsx b/newsfeed/src/components/PosterBylineLocation.tsx
index f9a0eb8f..d25c2415 100644
--- a/newsfeed/src/components/PosterBylineLocation.tsx
+++ b/newsfeed/src/components/PosterBylineLocation.tsx
@@ -1,10 +1,8 @@
-import * as React from "react";
+import { useFragment } from "react-relay";
+import { graphql } from "relay-runtime";
 
 import type { PosterBylineLocationFragment$key } from "./__generated__/PosterBylineLocationFragment.graphql";
 
-import { graphql } from "relay-runtime";
-import { useFragment } from "react-relay";
-
 const PosterBylineLocationFragment = graphql`
   fragment PosterBylineLocationFragment on Location {
     name
@@ -15,9 +13,7 @@ type Props = {
   location: PosterBylineLocationFragment$key;
 };
 
-export default function PosterBylineLocation({
-  location,
-}: Props): React.ReactElement {
+export default function PosterBylineLocation({ location }: Props) {
   const data = useFragment(PosterBylineLocationFragment, location);
   return <div className="byline__detail">{data.name}</div>;
 }
diff --git a/newsfeed/src/components/SearchInput.tsx b/newsfeed/src/components/SearchInput.tsx
index 4bf19c9d..c241766d 100644
--- a/newsfeed/src/components/SearchInput.tsx
+++ b/newsfeed/src/components/SearchInput.tsx
@@ -1,5 +1,3 @@
-import * as React from "react";
-
 import SmallSpinner from "./SmallSpinner";
 
 export type Props = {
diff --git a/newsfeed/src/components/SmallSpinner.tsx b/newsfeed/src/components/SmallSpinner.tsx
index 869f0e3e..6970925e 100644
--- a/newsfeed/src/components/SmallSpinner.tsx
+++ b/newsfeed/src/components/SmallSpinner.tsx
@@ -1,5 +1,3 @@
-import * as React from "react";
-
-export default function SmallSpinner({}): React.ReactElement {
+export default function SmallSpinner({}) {
   return <div className="small-spinner"></div>;
 }
diff --git a/newsfeed/src/components/Story.tsx b/newsfeed/src/components/Story.tsx
index 6cf85999..5914ea7d 100644
--- a/newsfeed/src/components/Story.tsx
+++ b/newsfeed/src/components/Story.tsx
@@ -1,9 +1,8 @@
-import * as React from "react";
 import Card from "./Card";
 import Heading from "./Heading";
+import Image from "./Image";
 import PosterByline, { type Props as PosterBylineProps } from "./PosterByline";
 import StorySummary from "./StorySummary";
-import Image from "./Image";
 
 type Props = {
   story: {
@@ -16,7 +15,7 @@ type Props = {
   };
 };
 
-export default function Story({ story }: Props): React.ReactElement {
+export default function Story({ story }: Props) {
   return (
     <Card>
       <PosterByline poster={story.poster} />
diff --git a/newsfeed/src/components/StoryCommentsComposer.tsx b/newsfeed/src/components/StoryCommentsComposer.tsx
index bc3f5162..fe4e2d9a 100644
--- a/newsfeed/src/components/StoryCommentsComposer.tsx
+++ b/newsfeed/src/components/StoryCommentsComposer.tsx
@@ -1,11 +1,9 @@
-import * as React from "react";
-import { graphql } from "relay-runtime";
+import { useState } from "react";
 import { useFragment } from "react-relay";
+import { graphql } from "relay-runtime";
 
 import type { StoryCommentsComposerFragment$key } from "./__generated__/StoryCommentsComposerFragment.graphql";
 
-const { useState } = React;
-
 export type Props = {
   story: StoryCommentsComposerFragment$key;
 };
diff --git a/newsfeed/src/components/StoryCommentsSection.tsx b/newsfeed/src/components/StoryCommentsSection.tsx
index b564af9b..c0d849ca 100644
--- a/newsfeed/src/components/StoryCommentsSection.tsx
+++ b/newsfeed/src/components/StoryCommentsSection.tsx
@@ -1,11 +1,9 @@
-import * as React from "react";
-import { graphql } from "relay-runtime";
 import { useFragment } from "react-relay";
+import { graphql } from "relay-runtime";
+
 import type { StoryCommentsSectionFragment$key } from "./__generated__/StoryCommentsSectionFragment.graphql";
 import Comment from "./Comment";
 
-const { useState, useTransition } = React;
-
 export type Props = {
   story: StoryCommentsSectionFragment$key;
 };
diff --git a/newsfeed/src/components/StoryLikeButton.tsx b/newsfeed/src/components/StoryLikeButton.tsx
index 3e18fe65..14cc7ebb 100644
--- a/newsfeed/src/components/StoryLikeButton.tsx
+++ b/newsfeed/src/components/StoryLikeButton.tsx
@@ -1,6 +1,5 @@
-import * as React from "react";
-import { graphql } from "relay-runtime";
 import { useFragment } from "react-relay";
+import { graphql } from "relay-runtime";
 
 import type { StoryLikeButtonFragment$key } from "./__generated__/StoryLikeButtonFragment.graphql";
 
@@ -16,7 +15,7 @@ const StoryLikeButtonFragment = graphql`
   }
 `;
 
-export default function StoryLikeButton({ story }: Props): React.ReactElement {
+export default function StoryLikeButton({ story }: Props) {
   const data = useFragment<StoryLikeButtonFragment$key>(
     StoryLikeButtonFragment,
     story
diff --git a/newsfeed/src/components/playground/GraphiQL.tsx b/newsfeed/src/components/playground/GraphiQL.tsx
index 034af174..2b76c0b9 100644
--- a/newsfeed/src/components/playground/GraphiQL.tsx
+++ b/newsfeed/src/components/playground/GraphiQL.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
 import { GraphiQL as GraphQLPlayground, GraphiQLProviderProps } from "graphiql";
 import "graphiql/graphiql.css";
+import { useState } from "react";
 
 const defaultQuery = `
 query MyQuery {
@@ -30,7 +30,7 @@ const fetcher: GraphiQLProviderProps["fetcher"] = async (
 };
 
 export default function GraphiQL() {
-  const [query, setQuery] = React.useState("");
+  const [query, setQuery] = useState("");
 
   return (
     <GraphQLPlayground
diff --git a/newsfeed/src/index.tsx b/newsfeed/src/index.tsx
index 8b47a563..6955e50b 100644
--- a/newsfeed/src/index.tsx
+++ b/newsfeed/src/index.tsx
@@ -1,9 +1,8 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom/client";
-import "./style.css";
+import { createRoot } from "react-dom/client";
 
 import App from "./components/App";
 import GraphiQL from "./components/playground/GraphiQL";
+import "./style.css";
 
 function Routes() {
   if (window.location.pathname === "/playground") {
@@ -12,5 +11,5 @@ function Routes() {
   return <App />;
 }
 
-const root = ReactDOM.createRoot(document.getElementById("app"));
+const root = createRoot(document.getElementById("app"));
 root.render(<Routes />);
diff --git a/newsfeed/src/relay/RelayEnvironment.tsx b/newsfeed/src/relay/RelayEnvironment.tsx
index b9ac6d3a..3b06f22b 100644
--- a/newsfeed/src/relay/RelayEnvironment.tsx
+++ b/newsfeed/src/relay/RelayEnvironment.tsx
@@ -1,13 +1,13 @@
-import * as React from "react";
-import { useMemo } from "react";
+import { ReactNode, useMemo } from "react";
 import { RelayEnvironmentProvider } from "react-relay";
+
 import { createEnvironment } from "./environment";
 
 export default function RelayEnvironment({
   children,
 }: {
-  children: React.ReactNode;
-}): React.ReactElement {
+  children: ReactNode;
+}) {
   const environment = useMemo(() => {
     return createEnvironment();
   }, []);
diff --git a/newsfeed/src/relay/environment.ts b/newsfeed/src/relay/environment.ts
index 50c72970..455e23fc 100644
--- a/newsfeed/src/relay/environment.ts
+++ b/newsfeed/src/relay/environment.ts
@@ -1,11 +1,11 @@
+import type { FetchFunction, IEnvironment } from "relay-runtime";
 import {
-  Store,
-  RecordSource,
   Environment,
   Network,
   Observable,
+  RecordSource,
+  Store,
 } from "relay-runtime";
-import type { FetchFunction, IEnvironment } from "relay-runtime";
 
 const fetchFn: FetchFunction = (params, variables) => {
   const response = fetch("/api", {