fix(useIsInitialRenderRef): clarify usage and fix ordering

Author: jquense

src/useIsInitialRenderRef.ts

@@ -2,18 +2,26 @@ import { useEffect, useLayoutEffect, useRef } from 'react'
 
 /**
  * Returns ref that is `true` on the initial render and `false` on subsequent renders. It
- * is StrictMode safe, so will reset correctly if the component is unmounted and remounted
+ * is StrictMode safe, so will reset correctly if the component is unmounted and remounted.
+ *
+ * This hook *must* be used before any effects that read it's value to be accurate.
  */
 export default function useIsInitialRenderRef() {
+  const effectCount = useRef(0)
   const isInitialRenderRef = useRef(true)
 
   useLayoutEffect(() => {
-    isInitialRenderRef.current = false
+    effectCount.current += 1
+
+    if (effectCount.current >= 2) {
+      isInitialRenderRef.current = false
+    }
   })
 
   // Strict mode handling in React 18
   useEffect(
     () => () => {
+      effectCount.current = 0
       isInitialRenderRef.current = true
     },
     [],

test/helpers.tsx

@@ -1,5 +1,4 @@
 import { renderHook as baseRenderHook } from '@testing-library/react-hooks'
-import React from 'react'
 
 type ReactWrapper<P> = {
   setProps(props: Partial<P>): void

test/useIsInitialRenderRef.test.tsx

@@ -0,0 +1,26 @@
+import { act, renderHook } from '@testing-library/react-hooks'
+import useIsInitialRenderRef from '../src/useIsInitialRenderRef'
+import { useLayoutEffect } from 'react'
+
+describe('useIsInitialRenderRef', () => {
+  it('should not be true until the second committed render', () => {
+    let count = 0
+
+    // TODO: test with strict mode
+    const { rerender } = renderHook(() => {
+      const ref = useIsInitialRenderRef()
+
+      useLayoutEffect(() => {
+        if (ref.current) return
+
+        count++
+      })
+    })
+
+    expect(count).toEqual(0)
+
+    rerender()
+
+    expect(count).toEqual(1)
+  })
+})