React: تحسين الأداء: useMemo و useCallback

function ShopPage() {
  const [products] = useState(generate10000Products())
  const [search, setSearch] = useState('')
  const [sortBy, setSortBy] = useState('name')

  // ❌ Question：Re-filter after each input 10,000 Items
  const filtered = products
    .filter(p => p.name.includes(search))
    .sort((a, b) => a[sortBy] > b[sortBy] ? 1 : -1)

  return (
    <div>
      <input value={search} onChange={e => setSearch(e.target.value)} />
      <select value={sortBy} onChange={e => setSortBy(e.target.value)}>
        <option value="name">By Name</option>
        <option value="price">By Price</option>
      </select>
      <ProductList products={filtered} />
    </div>
  )
}

function ShopPage() {
  const [products] = useState(generate10000Products())
  const [search, setSearch] = useState('')
  const [sortBy, setSortBy] = useState('name')

  // ✅ useMemo：Only at search or  sortBy Recalculate only when there is a change
  const filtered = useMemo(() => {
    console.log('Refilter...(Only when the search terms or sorting criteria change)')
    return products
      .filter(p => p.name.includes(search))
      .sort((a, b) => a[sortBy] > b[sortBy] ? 1 : -1)
  }, [search, sortBy, products])

  return (
    <div>
      <input value={search} onChange={e => setSearch(e.target.value)} />
      <select value={sortBy} onChange={e => setSortBy(e.target.value)}>
        <option value="name">By Name</option>
        <option value="price">By Price</option>
      </select>
      <ProductList products={filtered} />
    </div>
  )
}

const memoizedValue = useMemo(() => {
  return Costly Computations()
}, [Dependency1, Dependency2])

// Scene 1：Data Conversion（Filter、Sort、Grouping）
const activeUsers = useMemo(
  () => users.filter(u => u.isActive).sort((a, b) => a.name.localeCompare(b.name)),
  [users]
)

// Scene 2：Format（Numbers、Date、String Concatenation）
const formattedPrice = useMemo(
  () => new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }).format(price),
  [price]
)

// Scene 3：Derived State（Calculating New Data from Existing Data）
const statistics = useMemo(() => ({
  total: orders.length,
  paid: orders.filter(o => o.status === 'paid').length,
  amount: orders.reduce((sum, o) => sum + o.amount, 0),
  avgAmount: orders.length ? orders.reduce((sum, o) => sum + o.amount, 0) / orders.length : 0
}), [orders])

...

// ============================================
// Example：useMemo vs no useMemo Performance Comparison
// ============================================

function ExpensiveCalc({ num, unrelated }) {
  // ❌ None useMemo：Executed on every render
  const slowResult1 = slowFibonacci(num)

  // ✅ With useMemo: num If it hasn't changed, don't recalculate it.
  const slowResult2 = useMemo(() => slowFibonacci(num), [num])

  return (
    <div>
      <p>num={num} The Fibonacci sequence</p>
      <p>Without useMemo: {slowResult1}（Rendering calculations each time）</p>
      <p>With useMemo: {slowResult2}（Only at num Calculate when changes occur）</p>
      <p>Unrelated Status：{unrelated}（Click the button to change this value）</p>
    </div>
  )
}

function slowFibonacci(n) {
  if (n <= 1) return n
  let a = 0, b = 1, c
  for (let i = 2; i <= n; i++) { c = a + b; a = b; b = c }
  console.log('fibonacci Calculation！n=' + n)
  return b
}
// Click to Make a Difference unrelated → without useMemo recalculates，with useMemo skips

Fibonacci(n): بدون useMemo يُعاد الحساب في كل عملية عرض، ومع useMemo يُتخطى إلا عند تغير حالة غير ذات صلة. وحدة التحكم: "fibonacci calculated! n=X"

const memoizedFn = useCallback(() => {
  doSomething(a, b)
}, [a, b])

function Parent() {
  const [count, setCount] = useState(0)

  // ❌ Every time Parent Rendering，handleClick These are all new functions
  // resulting in Child 's  React.memo Failure
  const handleClick = () => {
    console.log('Clicked')
  }

  // ✅ useCallback：handleClick Citation unchanged
  // Child 's  React.memo Works properly（Skip Re-rendering）
  const handleClick = useCallback(() => {
    console.log('Clicked')
  }, [])  // Empty Dependency：This function will never change.
}

// ❌ Not necessary：Simple Calculations
const doubled = useMemo(() => count * 2, [count])
// ✅ Write it directly：count * 2 It's already pretty fast as it is
const doubled = count * 2

// ❌ Not necessary：Handle events without passing them to child components
const handleClick = useCallback(() => {
  console.log('Click')
}, [])
// ✅ Just write it down.
const handleClick = () => console.log('Click')

// ❌ Not necessary：The child component isn't being used. React.memo
// useCallback It's been packaged, but no one is buying it."Stable Citation"

// useMemo and  useCallback It involves expenses（Relies heavily on arrays）
// Abuse = Introducing Additional Comparison Logic，Slower than if it weren't optimized

// Rule of thumb：
// 1. First, let's write the version without optimization.
// 2. Feeling some lag（fps < 60）Use again
// 3. use  React DevTools Profiler Measurement

... ('fibonacci Calculation！n=' + n)

مربع بحث + ترقيم صفحات. إدخال "React" → 3 نتائج ("Results React - Page 1" وغيرها). يمنع useCallback الحلقة اللانهائية في useEffect. أزرار Prev/Next.

العنوان الفرعي: "🔍 Search（useCallback Demo）". يعرض: "🔍 Search（useCallback Demo）". الحالة: query (setter: setQuery)، results (setter: setResults)، page (setter: setPage). زر: setPage(p => p + 1)}>Next Page. الإدخال: Enter a search term.... القائمة: {r.title}. يتولى useEffect إدارة الآثار الجانبية. يُخزن useCallback مرجع دالة المعالجة. جلب بيانات غير متزامن/حالة التحميل

function VirtualList({ items, itemHeight = 40, visibleHeight = 400 }) {
  const [scrollTop, setScrollTop] = useState(0)

  const visibleCount = Math.ceil(visibleHeight / itemHeight)
  const totalHeight = useMemo(() => items.length * itemHeight, [items.length, itemHeight])

  const { startIndex, endIndex, offsetY } = useMemo(() => {
    const start = Math.floor(scrollTop / itemHeight)
    const end = Math.min(start + visibleCount + 1, items.length)
    return { startIndex: start, endIndex: end, offsetY: start * itemHeight }
  }, [scrollTop, itemHeight, visibleCount, items.length])

  const visibleItems = useMemo(() => items.slice(startIndex, endIndex), [items, startIndex, endIndex])

  return (
    <div onScroll={e => setScrollTop(e.currentTarget.scrollTop)}
      style={{ height: visibleHeight, overflowY: 'auto', border: '1px solid #ddd', borderRadius: 4 }}>
      <div style={{ height: totalHeight, position: 'relative' }}>
        <div style={{ position: 'absolute', top: offsetY, width: '100%' }}>
          {visibleItems.map((item, i) => (
            <div key={startIndex + i} style={{ height: itemHeight, padding: '0 12px', display: 'flex', alignItems: 'center', borderBottom: '1px solid #f0f0f0' }}>
              Row {startIndex + i}: {item}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

التمرير الافتراضي: لا تُعرض إلا الصفوف المرئية (نحو 10 صفوف من 1000+). التمرير → تُستبدل الصفوف تباعًا. الارتفاع الكلي = items × 40px. يحسب useMemo النطاق المرئي.

يعرض: "items.slice(startIndex, endIndex), [items, startIndex, endIn". الحالة: scrollTop (setter: setScrollTop). يحسّن useMemo حساب الرسم

قائمة منتجات (Keyboard $79، Mouse $49، Monitor $399، Headphones $129) مع إمكانية التصفية. "Remove" يحذف العنصر. React.memo + useCallback = لا يُعاد العرض إلا للعناصر التي تغيرت.

العرض: ...

function BadExample({ count }) {
  // ❌ Simple calculations are not required useMemo——Create memo Expenses > The Calculation Itself
  const doubled = useMemo(() => count * 2, [count])
  // ✅ Direct Calculation
  const doubledOk = count * 2

  // ❌ Each render creates a new object as useMemo Dependency
  const config = useMemo(() => ({ count }), [count])
  const badResult = useMemo(() => config.count * 3, [config]) // config A new reference each time！
  // ✅ Using Primitive Types Directly as Dependencies
  const goodResult = useMemo(() => count * 3, [count])

  return <p>Doubled: {doubledOk}, Tripled: {goodResult}</p>
}

function GoodExample({ items, query }) {
  // ✅ Filter/Sorting large amounts of data useMemo
  const filtered = useMemo(() => {
    return items.filter(item =>
      item.name.toLowerCase().includes(query.toLowerCase())
    ).sort((a, b) => a.name.localeCompare(b.name))
  }, [items, query])

  // ✅ Complex objects passed to child components use useMemo
  const chartData = useMemo(() => ({
    labels: filtered.map(i => i.name),
    values: filtered.map(i => i.price),
  }), [filtered])

  return (
    <div>
      <p>Found: {filtered.length} items</p>
      <Chart data={chartData} />
    </div>
  )
}

❌ استخدام useMemo مع count*2 (التكلفة > الحساب نفسه). ❌ استخدام كائن جديد كاعتماد يكسر memo. ✅ استخدم useMemo للتصفية/الترتيب على نطاق كبير وبيانات الرسوم البيانية المشتقة.