chore(examples, tests): remove React.FC from the TSX file

examples/todos/src/App.tsx

@@ -1,4 +1,4 @@
-import { FC, FormEvent } from 'react'
+import { FormEvent } from 'react'
 import { CloseOutlined } from '@ant-design/icons'
 import { a, useTransition } from '@react-spring/web'
 import { Radio } from 'antd'
@@ -26,7 +26,7 @@ type TodoItemProps = {
   atom: PrimitiveAtom<Todo>
   remove: RemoveFn
 }
-const TodoItem: FC<TodoItemProps> = ({ atom, remove }) => {
+const TodoItem = ({ atom, remove }: TodoItemProps) => {
   const [item, setItem] = useAtom(atom)
   const toggleCompleted = () =>
     setItem((props) => ({ ...props, completed: !props.completed }))
@@ -59,7 +59,7 @@ const Filter = () => {
 type FilteredType = {
   remove: RemoveFn
 }
-const Filtered: FC<FilteredType> = (props) => {
+const Filtered = (props: FilteredType) => {
   const [todos] = useAtom(filteredAtom)
   const transitions = useTransition(todos, {
     keys: (todo) => todo.toString(),

examples/todos_with_atomFamily/src/App.tsx

@@ -1,4 +1,4 @@
-import { FC, FormEvent } from 'react'
+import { FormEvent } from 'react'
 import { CloseOutlined } from '@ant-design/icons'
 import { a, useTransition } from '@react-spring/web'
 import { Radio } from 'antd'
@@ -24,10 +24,13 @@ const filteredAtom = atom((get) => {
   else return todos.filter((id) => !get(todoAtomFamily({ id })).completed)
 })
 
-const TodoItem: FC<{
+const TodoItem = ({
+  id,
+  remove,
+}: {
   id: string
   remove: (id: string) => void
-}> = ({ id, remove }) => {
+}) => {
   const [item, setItem] = useAtom(todoAtomFamily({ id }))
   const toggleCompleted = () => setItem({ ...item, completed: !item.completed })
   return (
@@ -45,7 +48,7 @@ const TodoItem: FC<{
   )
 }
 
-const Filter: FC = () => {
+const Filter = () => {
   const [filter, set] = useAtom(filterAtom)
   return (
     <Radio.Group onChange={(e) => set(e.target.value)} value={filter}>
@@ -56,9 +59,7 @@ const Filter: FC = () => {
   )
 }
 
-const Filtered: FC<{
-  remove: (id: string) => void
-}> = ({ remove }) => {
+const Filtered = ({ remove }: { remove: (id: string) => void }) => {
   const [todos] = useAtom(filteredAtom)
   const transitions = useTransition(todos, {
     keys: (id: string) => id,
@@ -127,7 +128,7 @@ const serializeAtom = atom<
   }
 })
 
-const Persist: FC = () => {
+const Persist = () => {
   const [, dispatch] = useAtom(serializeAtom)
   const save = () => {
     dispatch({

src/core/Provider.ts

@@ -1,14 +1,18 @@
-import { FC, createElement, useDebugValue, useRef } from 'react'
+import { PropsWithChildren, createElement, useDebugValue, useRef } from 'react'
 import type { Atom, Scope } from './atom'
 import { createStore, getStoreContext, isDevStore } from './contexts'
 import type { StoreForDevelopment } from './contexts'
 import { useMutableSource } from './useMutableSource'
 import type { AtomState, State } from './vanilla'
 
-export const Provider: FC<{
+export const Provider = ({
+  initialValues,
+  scope,
+  children,
+}: PropsWithChildren<{
   initialValues?: Iterable<readonly [Atom<unknown>, unknown]>
   scope?: Scope
-}> = ({ initialValues, scope, children }) => {
+}>) => {
   const storeRef = useRef<ReturnType<typeof createStore> | null>(null)
   if (storeRef.current === null) {
     // lazy initialization

tests/async.test.tsx

@@ -1,4 +1,4 @@
-import { FC, StrictMode, Suspense, useEffect, useRef } from 'react'
+import { StrictMode, Suspense, useEffect, useRef } from 'react'
 import { fireEvent, render, waitFor } from '@testing-library/react'
 import { Atom, atom, useAtom } from '../src/index'
 import { getTestProvider } from './testUtils'
@@ -22,7 +22,7 @@ it('does not show async stale result', async () => {
 
   const committed: number[] = []
 
-  const Counter: FC = () => {
+  const Counter = () => {
     const [count, setCount] = useAtom(countAtom)
     const onClick = async () => {
       setCount((c) => c + 1)
@@ -37,7 +37,7 @@ it('does not show async stale result', async () => {
     )
   }
 
-  const DelayedCounter: FC = () => {
+  const DelayedCounter = () => {
     const [delayedCount] = useAtom(asyncCountAtom)
     useEffect(() => {
       committed.push(delayedCount)
@@ -83,7 +83,7 @@ it('works with async get with extra deps', async () => {
     return get(countAtom)
   })
 
-  const Counter: FC = () => {
+  const Counter = () => {
     const [count, setCount] = useAtom(countAtom)
     return (
       <>
@@ -93,7 +93,7 @@ it('works with async get with extra deps', async () => {
     )
   }
 
-  const DelayedCounter: FC = () => {
+  const DelayedCounter = () => {
     const [delayedCount] = useAtom(asyncCountAtom)
     return <div>delayedCount: {delayedCount}</div>
   }
@@ -130,7 +130,7 @@ it('reuses promises on initial read', async () => {
     return 'ready'
   })
 
-  const Child: FC = () => {
+  const Child = () => {
     const [str] = useAtom(asyncAtom)
     return <div>{str}</div>
   }
@@ -161,7 +161,7 @@ it('uses multiple async atoms at once', async () => {
     return 'ready2'
   })
 
-  const Component: FC = () => {
+  const Component = () => {
     const [some] = useAtom(someAtom)
     const [some2] = useAtom(someAtom2)
     return (
@@ -195,7 +195,7 @@ it('uses async atom in the middle of dependency chain', async () => {
   })
   const delayedCountAtom = atom((get) => get(asyncCountAtom))
 
-  const Counter: FC = () => {
+  const Counter = () => {
     const [count, setCount] = useAtom(countAtom)
     const [delayedCount] = useAtom(delayedCountAtom)
     return (
@@ -234,15 +234,15 @@ it('updates an async atom in child useEffect on remount without setTimeout', asy
     async (get, set) => set(countAtom, get(countAtom) + 1)
   )
 
-  const Counter: FC = () => {
+  const Counter = () => {
     const [count, incCount] = useAtom(asyncCountAtom)
     useEffect(() => {
       incCount()
     }, [incCount])
     return <div>count: {count}</div>
   }
 
-  const Parent: FC = () => {
+  const Parent = () => {
     const [toggle, setToggle] = useAtom(toggleAtom)
     return (
       <>
@@ -285,15 +285,15 @@ it('updates an async atom in child useEffect on remount', async () => {
     }
   )
 
-  const Counter: FC = () => {
+  const Counter = () => {
     const [count, incCount] = useAtom(asyncCountAtom)
     useEffect(() => {
       incCount()
     }, [incCount])
     return <div>count: {count}</div>
   }
 
-  const Parent: FC = () => {
+  const Parent = () => {
     const [toggle, setToggle] = useAtom(toggleAtom)
     return (
       <>
@@ -330,12 +330,12 @@ it('async get and useEffect on parent', async () => {
     return 'resolved'
   })
 
-  const AsyncComponent: FC = () => {
+  const AsyncComponent = () => {
     const [text] = useAtom(asyncAtom)
     return <div>text: {text}</div>
   }
 
-  const Parent: FC = () => {
+  const Parent = () => {
     const [count, setCount] = useAtom(countAtom)
     useEffect(() => {
       setCount((c) => c + 1)
@@ -375,12 +375,12 @@ it('async get with another dep and useEffect on parent', async () => {
     return count
   })
 
-  const AsyncComponent: FC = () => {
+  const AsyncComponent = () => {
     const [count] = useAtom(asyncAtom)
     return <div>async: {count}</div>
   }
 
-  const Parent: FC = () => {
+  const Parent = () => {
     const [count, setCount] = useAtom(countAtom)
     useEffect(() => {
       setCount((c) => c + 1)
@@ -428,12 +428,12 @@ it('set promise atom value on write (#304)', async () => {
   })
   asyncAtom.debugLabel = 'asyncAtom'
 
-  const Counter: FC = () => {
+  const Counter = () => {
     const [count] = useAtom(countAtom)
     return <div>count: {count * 1}</div>
   }
 
-  const Parent: FC = () => {
+  const Parent = () => {
     const [, dispatch] = useAtom(asyncAtom)
     return (
       <>
@@ -471,7 +471,7 @@ it('uses async atom double chain (#306)', async () => {
     return get(asyncCountAtom)
   })
 
-  const Counter: FC = () => {
+  const Counter = () => {
     const [count, setCount] = useAtom(countAtom)
     const [delayedCount] = useAtom(delayedCountAtom)
     return (
@@ -512,7 +512,7 @@ it('uses an async atom that depends on another async atom', async () => {
     return 2
   })
 
-  const Counter: FC = () => {
+  const Counter = () => {
     const [num] = useAtom(asyncAtom)
     return <div>num: {num}</div>
   }
@@ -548,7 +548,7 @@ it('a derived atom from a newly created async atom (#351)', async () => {
   }
   const derivedAtom = atom((get) => get(getAsyncAtom(get(countAtom))))
 
-  const Counter: FC = () => {
+  const Counter = () => {
     const [, setCount] = useAtom(countAtom)
     const [derived] = useAtom(derivedAtom)
     return (
@@ -598,7 +598,7 @@ it('Handles synchronously invoked async set (#375)', async () => {
     fetch()
   })
 
-  const ListDocuments: FC = () => {
+  const ListDocuments = () => {
     const [loading] = useAtom(loadingAtom)
     const [document] = useAtom(documentAtom)
     const [, loadDocument] = useAtom(loadDocumentAtom)
@@ -634,7 +634,7 @@ it('async write self atom', async () => {
     set(countAtom, -1)
   })
 
-  const Counter: FC = () => {
+  const Counter = () => {
     const [count, inc] = useAtom(countAtom)
     return (
       <>
@@ -669,7 +669,7 @@ it('non suspense async write self atom with setTimeout (#389)', async () => {
     }, 0)
   })
 
-  const Counter: FC = () => {
+  const Counter = () => {
     const [count, inc] = useAtom(countAtom)
     return (
       <>
@@ -702,12 +702,12 @@ it('should override promise as atom value (#430)', async () => {
     set(countAtom, Promise.resolve(arg))
   })
 
-  const Counter: FC = () => {
+  const Counter = () => {
     const [count] = useAtom(countAtom)
     return <div>count: {count * 1}</div>
   }
 
-  const Control: FC = () => {
+  const Control = () => {
     const [, setCount] = useAtom(setCountAtom)
     return <button onClick={() => setCount(1)}>button</button>
   }
@@ -749,12 +749,12 @@ it('combine two promise atom values (#442)', async () => {
     init()
   }
 
-  const Counter: FC = () => {
+  const Counter = () => {
     const [count] = useAtom(derivedAtom)
     return <div>count: {count}</div>
   }
 
-  const Control: FC = () => {
+  const Control = () => {
     useAtom(initAtom)
     return null
   }
@@ -787,12 +787,12 @@ it('set two promise atoms at once', async () => {
     set(count2Atom, Promise.resolve(2))
   })
 
-  const Counter: FC = () => {
+  const Counter = () => {
     const [count] = useAtom(derivedAtom)
     return <div>count: {count}</div>
   }
 
-  const Control: FC = () => {
+  const Control = () => {
     const [, setCounts] = useAtom(setCountsAtom)
     return <button onClick={() => setCounts()}>button</button>
   }