refactor(react): use direct undefined comparison for fallback in `<…

…Delay/>` and `<Suspense/>` components (#1302)

# Overview

Previously, `typeof` was used to check if `fallback` was `undefined`,
but now it directly compares against `undefined` for improved
efficiency. Additionally, added missing test cases for the `fallback`
functionality.

## PR Checklist
- [X] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

## Additional

I was impressed by how `defaultProps` can be conveniently managed using
`useContext`! I learned a lot thanks to this.

---------

Co-authored-by: Jonghyeon Ko <[email protected]>

.changeset/flat-eagles-train.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react": patch
+---
+
+refactor(react): use direct `undefined` comparison for fallback in `<Delay/>` and `<Suspense/>`

packages/react/src/Delay.spec.tsx

@@ -1,5 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react'
 import ms from 'ms'
+import { DefaultProps, DefaultPropsProvider } from './DefaultProps'
 import { Delay } from './Delay'
 import { Message_Delay_ms_prop_should_be_greater_than_or_equal_to_0, SuspensiveError } from './models/SuspensiveError'
 import { CustomError, TEXT } from './test-utils'
@@ -53,4 +54,13 @@ describe('<Delay/>', () => {
       expect(error).not.toBeInstanceOf(CustomError)
     }
   })
+  it('should use `defaultProps.fallback` if no fallback prop is passed', () => {
+    const defaultProps = new DefaultProps({ Delay: { fallback: 'defaultFallback' } })
+    render(
+      <DefaultPropsProvider defaultProps={defaultProps}>
+        <Delay ms={1}>{TEXT}</Delay>
+      </DefaultPropsProvider>
+    )
+    expect(screen.queryByText('defaultFallback')).toBeInTheDocument()
+  })
 })

packages/react/src/Delay.tsx

@@ -9,18 +9,16 @@ export interface DelayProps extends PropsWithChildren {
 }
 
 export const Delay = (props: DelayProps) => {
-  if (process.env.NODE_ENV === 'development') {
-    if (typeof props.ms === 'number') {
-      SuspensiveError.assert(props.ms >= 0, Message_Delay_ms_prop_should_be_greater_than_or_equal_to_0)
-    }
+  if (process.env.NODE_ENV === 'development' && typeof props.ms === 'number') {
+    SuspensiveError.assert(props.ms >= 0, Message_Delay_ms_prop_should_be_greater_than_or_equal_to_0)
   }
   const defaultProps = useContext(DelayDefaultPropsContext)
   const ms = props.ms ?? defaultProps.ms ?? 0
 
   const [isDelaying, setIsDelaying] = useState(ms > 0)
   useTimeout(() => setIsDelaying(false), ms)
 
-  const fallback = typeof props.fallback === 'undefined' ? defaultProps.fallback : props.fallback
+  const fallback = props.fallback === undefined ? defaultProps.fallback : props.fallback
   return <>{isDelaying ? fallback : props.children}</>
 }
 if (process.env.NODE_ENV === 'development') {

packages/react/src/Suspense.spec.tsx

@@ -1,5 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react'
 import ms from 'ms'
+import { DefaultProps, DefaultPropsProvider } from './DefaultProps'
 import { Suspense } from './Suspense'
 import { FALLBACK, Suspend, TEXT } from './test-utils'
 
@@ -60,4 +61,18 @@ describe('<Suspense clientOnly/>', () => {
     expect(screen.queryByText(FALLBACK)).not.toBeInTheDocument()
     expect(screen.queryByText(TEXT)).toBeInTheDocument()
   })
+  it('should use `defaultProps.fallback` if `fallback` is not provided', () => {
+    const defaultProps = new DefaultProps({ Suspense: { fallback: 'defaultFallback' } })
+
+    render(
+      <DefaultPropsProvider defaultProps={defaultProps}>
+        <Suspense clientOnly>
+          <Suspend during={ms('0.1s')} toShow={TEXT} />
+        </Suspense>
+      </DefaultPropsProvider>
+    )
+
+    expect(screen.queryByText('defaultFallback')).toBeInTheDocument()
+    expect(screen.queryByText(TEXT)).not.toBeInTheDocument()
+  })
 })

packages/react/src/Suspense.tsx

@@ -33,9 +33,7 @@ export const Suspense = ({ clientOnly, children, fallback }: SuspenseProps) => {
   })
 
   return (
-    <DefinedSuspense fallback={typeof fallback === 'undefined' ? defaultProps.fallback : fallback}>
-      {children}
-    </DefinedSuspense>
+    <DefinedSuspense fallback={fallback === undefined ? defaultProps.fallback : fallback}>{children}</DefinedSuspense>
   )
 }
 if (process.env.NODE_ENV === 'development') {