fix: reduce nest children

Signed-off-by: Innei <[email protected]>

Author: Innei

src/components/ui/viewport/OnlyDesktop.tsx

@@ -16,5 +16,5 @@ export const OnlyDesktop: Component = ({ children }) => {
 
   if (!isLg) return null
 
-  return <>{children}</>
+  return children
 }

src/components/ui/viewport/OnlyMobile.tsx

@@ -18,5 +18,5 @@ export const OnlyMobile: Component = ({ children }) => {
 
   if (!isMobile) return null
 
-  return <>{children}</>
+  return children
 }

src/providers/root/index.tsx

@@ -11,7 +11,7 @@ import { JotaiStoreProvider } from './jotai-provider'
 import { ModalStackProvider } from './modal-stack-provider'
 import { PageScrollInfoProvider } from './page-scroll-info-provider'
 import { SentryProvider } from './sentry-provider'
-import { SocketProvider } from './socket-provider'
+import { SocketContainer } from './socket-provider'
 import { ViewportProvider } from './viewport-provider'
 
 const contexts: JSX.Element[] = [
@@ -21,11 +21,16 @@ const contexts: JSX.Element[] = [
   <JotaiStoreProvider key="jotaiStoreProvider" />,
   <AggregationProvider key="aggregationProvider" />,
   <ViewportProvider key="viewportProvider" />,
-  <SocketProvider key="socketProvider" />,
+
   <PageScrollInfoProvider key="PageScrollInfoProvider" />,
   <DebugProvider key="debugProvider" />,
   <ModalStackProvider key="modalStackProvider" />,
 ]
 export function Providers({ children }: PropsWithChildren) {
-  return <ProviderComposer contexts={contexts}>{children}</ProviderComposer>
+  return (
+    <>
+      <SocketContainer />
+      <ProviderComposer contexts={contexts}>{children}</ProviderComposer>
+    </>
+  )
 }

src/providers/root/sentry-provider.tsx

@@ -20,5 +20,5 @@ export const SentryProvider = ({ children }: PropsWithChildren) => {
       window.onerror = null
     }
   }, [])
-  return <>{children}</>
+  return children
 }

src/providers/root/socket-provider.tsx

@@ -3,13 +3,13 @@
 import { useEffect } from 'react'
 
 // const Context = createContext<TSocketClient>(null as any)
-export const SocketProvider: Component = ({ children }) => {
+export const SocketContainer: Component = () => {
   useEffect(() => {
     import('~/socket').then((module) => {
       const { socketClient } = module
       socketClient.initIO()
     })
   }, [])
 
-  return <>{children}</>
+  return null
 }