"React 19 use Hook تلتقي بـ Suspense: ثورة الـ Async"

// الطريقة القديمة - كابوس useEffect
function UserPosts({ userId }) {
  const [posts, setPosts] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    let cancelled = false

    async function fetchPosts() {
      try {
        setIsLoading(true)
        const data = await getPosts(userId)
        if (!cancelled) {
          setPosts(data)
        }
      } catch (err) {
        if (!cancelled) {
          setError(err)
        }
      } finally {
        if (!cancelled) {
          setIsLoading(false)
        }
      }
    }

    fetchPosts()

    return () => {
      cancelled = true
    }
  }, [userId])

  if (isLoading) return <div>جاري التحميل...</div>
  if (error) return <div>خطأ: {error.message}</div>

  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  )
}

// الطريقة الجديدة - نظيف وبسيط
import { use, Suspense } from 'react'

function UserPosts({ postsPromise }) {
  const posts = use(postsPromise)

  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  )
}

function UserPostsPage({ userId }) {
  const postsPromise = getPosts(userId)

  return (
    <Suspense fallback={<div>جاري التحميل...</div>}>
      <UserPosts postsPromise={postsPromise} />
    </Suspense>
  )
}

import { use } from 'react'

function Message({ messagePromise }) {
  const messageContent = use(messagePromise)
  return <p>هنا الرسالة: {messageContent}</p>
}

// ✅ use ممكن تكون شرطية
function Component({ shouldFetch, fetchPromise }) {
  if (shouldFetch) {
    const data = use(fetchPromise)
    return <div>{data}</div>
  }

  return <div>ما في بيانات محتاجة</div>
}

// ✅ use ممكن تكون في loops
function DataList({ promises }) {
  return (
    <ul>
      {promises.map(promise => {
        const data = use(promise)
        return <li key={data.id}>{data.name}</li>
      })}
    </ul>
  )
}

// ❌ ده ما بيشتغل - use بتعمل suspend، مش بترمي
function Component({ promise }) {
  try {
    const data = use(promise)
    return <div>{data}</div>
  } catch (error) {
    return <div>فشل التحميل</div>  // مش قابل للوصول!
  }
}

import { use, Suspense } from "react"
import { ErrorBoundary } from "react-error-boundary"

function Message({ messagePromise }) {
  const content = use(messagePromise)
  return <p>هنا الرسالة: {content}</p>
}

export function MessageContainer({ messagePromise }) {
  return (
    <ErrorBoundary fallback={<p> حصل خطأ ما</p>}>
      <Suspense fallback={<p> جاري تحميل الرسالة...</p>}>
        <Message messagePromise={messagePromise} />
      </Suspense>
    </ErrorBoundary>
  )
}

// app/page.tsx - Server Component
import db from './database'

async function Page({ id }) {
  // انتظر البيانات الحرجة مباشرة
  const note = await db.notes.get(id)

  // ما تنتظرش - مرر الـ promise للعميل
  const commentsPromise = db.comments.get(note.id)

  return (
    <div>
      <h1>{note.title}</h1>
      <p>{note.content}</p>
      <Suspense fallback={<p>جاري تحميل التعليقات...</p>}>
        <Comments commentsPromise={commentsPromise} />
      </Suspense>
    </div>
  )
}

// components/Comments.tsx - Client Component
"use client"
import { use } from 'react'

function Comments({ commentsPromise }) {
  // بيستكمل الـ promise من السيرفر
  // بيعمل suspend لحد ما البيانات تكون متاحة
  const comments = use(commentsPromise)

  return (
    <ul>
      {comments.map(comment => (
        <li key={comment.id}>{comment.text}</li>
      ))}
    </ul>
  )
}

import { use } from 'react'
import { ThemeContext } from './ThemeContext'

function ThemedButton() {
  const theme = use(ThemeContext)
  return <button className={theme}>اضغط هنا</button>
}

function Header({ showTheme }) {
  return (
    <header>
      {showTheme && <ThemeDisplay />}
    </header>
  )
}

function ThemeDisplay() {
  const theme = use(ThemeContext)
  return <span>الثيم الحالي: {theme}</span>
}

// app/dashboard/page.tsx
import { Suspense } from 'react'
import { db } from '@/lib/db'
import UserInfo from './user-info'
import Stats from './stats'
import ActivityFeed from './activity'

export default async function DashboardPage({ userId }) {
  // بيانات حرجة - انتظر مباشرة
  const user = await db.users.get(userId)

  // بيانات غير حرجة - مرر promises
  const statsPromise = db.stats.get(userId)
  const activityPromise = db.activity.get(userId)

  return (
    <div>
      <UserInfo user={user} />

      <Suspense fallback={<StatsSkeleton />}>
        <Stats statsPromise={statsPromise} />
      </Suspense>

      <Suspense fallback={<ActivitySkeleton />}>
        <ActivityFeed activityPromise={activityPromise} />
      </Suspense>
    </div>
  )
}

// app/dashboard/stats.tsx
'use client'
import { use } from 'react'

export default function Stats({ statsPromise }) {
  const stats = use(statsPromise)

  return (
    <div className="grid grid-cols-3 gap-4">
      <div>
        <h3>إجمالي المشاهدات</h3>
        <p>{stats.views}</p>
      </div>
      <div>
        <h3>المتابعون</h3>
        <p>{stats.followers}</p>
      </div>
      <div>
        <h3>المنشورات</h3>
        <p>{stats.posts}</p>
      </div>
    </div>
  )
}

// app/dashboard/activity.tsx
'use client'
import { use } from 'react'

export default function ActivityFeed({ activityPromise }) {
  const activities = use(activityPromise)

  return (
    <ul>
      {activities.map(activity => (
        <li key={activity.id}>
          <span>{activity.action}</span>
          <span>{activity.timestamp}</span>
        </li>
      ))}
    </ul>
  )
}