Merge branch 'main' into chore/ci/multiple-version-test

tests/error.test.tsx

@@ -280,7 +280,7 @@ it('can throw an error in async write function', async () => {
     }
   )
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const [count, dispatch] = useAtom(errorAtom)
     const onClick = async () => {
       try {

tests/utils/selectAtom.test.tsx

@@ -6,6 +6,14 @@ import { getTestProvider } from '../testUtils'
 
 const Provider = getTestProvider()
 
+const useCommitCount = () => {
+  const commitCountRef = useRef(1)
+  useEffect(() => {
+    commitCountRef.current += 1
+  })
+  return commitCountRef.current
+}
+
 it('selectAtom works as expected', async () => {
   const bigAtom = atom({ a: 0, b: 'othervalue' })
   const littleAtom = selectAtom(bigAtom, (v) => v.a)
@@ -58,14 +66,6 @@ it('do not update unless equality function says value has changed', async () =>
     (left, right) => JSON.stringify(left) === JSON.stringify(right)
   )
 
-  const useCommitCount = () => {
-    const rerenderCountRef = useRef(0)
-    useEffect(() => {
-      rerenderCountRef.current += 1
-    })
-    return rerenderCountRef.current
-  }
-
   const Parent = () => {
     const setValue = useUpdateAtom(bigAtom)
     return (
@@ -102,31 +102,31 @@ it('do not update unless equality function says value has changed', async () =>
   )
 
   await findByText('value: {"a":0}')
-  await findByText('commits: 0')
+  await findByText('commits: 1')
   fireEvent.click(getByText('copy'))
   await findByText('value: {"a":0}')
-  await findByText('commits: 0')
+  await findByText('commits: 1')
 
   fireEvent.click(getByText('increment'))
   await findByText('value: {"a":1}')
-  await findByText('commits: 1')
+  await findByText('commits: 2')
   fireEvent.click(getByText('copy'))
   await findByText('value: {"a":1}')
-  await findByText('commits: 1')
+  await findByText('commits: 2')
 
   fireEvent.click(getByText('increment'))
   await findByText('value: {"a":2}')
-  await findByText('commits: 2')
+  await findByText('commits: 3')
   fireEvent.click(getByText('copy'))
   await findByText('value: {"a":2}')
-  await findByText('commits: 2')
+  await findByText('commits: 3')
 
   fireEvent.click(getByText('increment'))
   await findByText('value: {"a":3}')
-  await findByText('commits: 3')
+  await findByText('commits: 4')
   fireEvent.click(getByText('copy'))
   await findByText('value: {"a":3}')
-  await findByText('commits: 3')
+  await findByText('commits: 4')
 })
 
 it('useSelector with scope', async () => {

tests/utils/useHydrateAtoms.test.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { fireEvent, render } from '@testing-library/react'
 import { atom, useAtom } from 'jotai'
 import { useHydrateAtoms } from 'jotai/utils'
@@ -9,7 +9,7 @@ const Provider = getTestProvider()
 it('useHydrateAtoms should only hydrate on first render', async () => {
   const countAtom = atom(0)
 
-  const Counter: FC<{ initialCount: number }> = ({ initialCount }) => {
+  const Counter = ({ initialCount }: { initialCount: number }) => {
     useHydrateAtoms([[countAtom, initialCount]])
     const [countValue, setCount] = useAtom(countAtom)
 
@@ -41,14 +41,16 @@ it('useHydrateAtoms should only hydrate on first render', async () => {
 it('useHydrateAtoms should not trigger unnessesary rerenders', async () => {
   const countAtom = atom(0)
 
-  const Counter: FC<{ initialCount: number }> = ({ initialCount }) => {
+  const Counter = ({ initialCount }: { initialCount: number }) => {
     useHydrateAtoms([[countAtom, initialCount]])
     const [countValue, setCount] = useAtom(countAtom)
-    const renderCount = useRef(0)
-    ++renderCount.current
+    const commitCount = useRef(1)
+    useEffect(() => {
+      ++commitCount.current
+    })
     return (
       <>
-        <div>renders: {renderCount.current}</div>
+        <div>commits: {commitCount.current}</div>
         <div>count: {countValue}</div>
         <button onClick={() => setCount((count) => count + 1)}>dispatch</button>
       </>
@@ -62,17 +64,17 @@ it('useHydrateAtoms should not trigger unnessesary rerenders', async () => {
   )
 
   await findByText('count: 42')
-  await findByText('renders: 1')
+  await findByText('commits: 1')
   fireEvent.click(getByText('dispatch'))
   await findByText('count: 43')
-  await findByText('renders: 2')
+  await findByText('commits: 2')
 })
 
 it('useHydrateAtoms should work with derived atoms', async () => {
   const countAtom = atom(0)
   const doubleAtom = atom((get) => get(countAtom) * 2)
 
-  const Counter: FC<{ initialCount: number }> = ({ initialCount }) => {
+  const Counter = ({ initialCount }: { initialCount: number }) => {
     useHydrateAtoms([[countAtom, initialCount]])
     const [countValue, setCount] = useAtom(countAtom)
     const [doubleCount] = useAtom(doubleAtom)
@@ -101,7 +103,7 @@ it('useHydrateAtoms should work with derived atoms', async () => {
 it('useHydrateAtoms can only restore an atom once', async () => {
   const countAtom = atom(0)
 
-  const Counter: FC<{ initialCount: number }> = ({ initialCount }) => {
+  const Counter = ({ initialCount }: { initialCount: number }) => {
     useHydrateAtoms([[countAtom, initialCount]])
     const [countValue, setCount] = useAtom(countAtom)
 
@@ -112,7 +114,7 @@ it('useHydrateAtoms can only restore an atom once', async () => {
       </>
     )
   }
-  const Counter2: FC<{ count: number }> = ({ count }) => {
+  const Counter2 = ({ count }: { count: number }) => {
     useHydrateAtoms([[countAtom, count]])
     const [countValue, setCount] = useAtom(countAtom)
 
@@ -147,7 +149,7 @@ it('useHydrateAtoms can only restore an atom once', async () => {
 it('useHydrateAtoms can only restore an atom once', async () => {
   const countAtom = atom(0)
 
-  const Counter: FC<{ initialCount: number }> = ({ initialCount }) => {
+  const Counter = ({ initialCount }: { initialCount: number }) => {
     useHydrateAtoms([[countAtom, initialCount]])
     const [countValue, setCount] = useAtom(countAtom)
 
@@ -158,7 +160,7 @@ it('useHydrateAtoms can only restore an atom once', async () => {
       </>
     )
   }
-  const Counter2: FC<{ count: number }> = ({ count }) => {
+  const Counter2 = ({ count }: { count: number }) => {
     useHydrateAtoms([[countAtom, count]])
     const [countValue, setCount] = useAtom(countAtom)
 
@@ -195,7 +197,7 @@ it('useHydrateAtoms should respect onMount', async () => {
   const onMountFn = jest.fn()
   countAtom.onMount = onMountFn
 
-  const Counter: FC<{ initialCount: number }> = ({ initialCount }) => {
+  const Counter = ({ initialCount }: { initialCount: number }) => {
     useHydrateAtoms([[countAtom, initialCount]])
     const [countValue] = useAtom(countAtom)
 
@@ -215,7 +217,7 @@ it('useHydrateAtoms should let you hydrate an atom once per scope', async () =>
   const scope = Symbol()
   const countAtom = atom(0)
 
-  const Counter: FC<{ initialCount: number }> = ({ initialCount }) => {
+  const Counter = ({ initialCount }: { initialCount: number }) => {
     useHydrateAtoms([[countAtom, initialCount]])
     const [countValue, setCount] = useAtom(countAtom)
 
@@ -226,7 +228,7 @@ it('useHydrateAtoms should let you hydrate an atom once per scope', async () =>
       </>
     )
   }
-  const Counter2: FC<{ initialCount: number }> = ({ initialCount }) => {
+  const Counter2 = ({ initialCount }: { initialCount: number }) => {
     useHydrateAtoms([[countAtom, initialCount]], scope)
     const [countValue, setCount] = useAtom(countAtom, scope)
 

tests/utils/useUpdateAtom.test.tsx

@@ -7,36 +7,36 @@ import { getTestProvider } from '../testUtils'
 
 const Provider = getTestProvider()
 
-const useRerenderCount = () => {
-  const rerenderCountRef = useRef(0)
+const useCommitCount = () => {
+  const commitCountRef = useRef(1)
   useEffect(() => {
-    rerenderCountRef.current += 1
+    commitCountRef.current += 1
   })
-  return rerenderCountRef.current
+  return commitCountRef.current
 }
 
 it('useUpdateAtom does not trigger rerender in component', async () => {
   const countAtom = atom(0)
 
   const Displayer = () => {
     const [count] = useAtom(countAtom)
-    const rerenders = useRerenderCount()
+    const commits = useCommitCount()
     return (
       <div>
-        count: {count}, rerenders: {rerenders}
+        count: {count}, commits: {commits}
       </div>
     )
   }
 
   const Updater = () => {
     const setCount = useUpdateAtom(countAtom)
-    const rerenders = useRerenderCount()
+    const commits = useCommitCount()
     return (
       <>
         <button onClick={() => setCount((value) => value + 1)}>
           increment
         </button>
-        <div>updater rerenders: {rerenders}</div>
+        <div>updater commits: {commits}</div>
       </>
     )
   }
@@ -59,23 +59,23 @@ it('useUpdateAtom does not trigger rerender in component', async () => {
   )
 
   await waitFor(() => {
-    getByText('count: 0, rerenders: 0')
-    getByText('updater rerenders: 0')
+    getByText('count: 0, commits: 1')
+    getByText('updater commits: 1')
   })
   fireEvent.click(getByText('increment'))
   await waitFor(() => {
-    getByText('count: 1, rerenders: 1')
-    getByText('updater rerenders: 0')
+    getByText('count: 1, commits: 2')
+    getByText('updater commits: 1')
   })
   fireEvent.click(getByText('increment'))
   await waitFor(() => {
-    getByText('count: 2, rerenders: 2')
-    getByText('updater rerenders: 0')
+    getByText('count: 2, commits: 3')
+    getByText('updater commits: 1')
   })
   fireEvent.click(getByText('increment'))
   await waitFor(() => {
-    getByText('count: 3, rerenders: 3')
-    getByText('updater rerenders: 0')
+    getByText('count: 3, commits: 4')
+    getByText('updater commits: 1')
   })
 })