💢 هوک useMemo یکی از hook های مهم React هست که به بهبود عملکرد اپلیکیشن‌های React کمک می‌کنه. موقعی که قصد داریم یک مقدار رو بهینه سازی کنیم تا فقط زمانی محاسبه بشه که لازم باشه، useMemo عمل می‌کنه.

مثلاً وقتی یک مقدار به صورت محاسباتی تولید میشه و از اون به عنوان ورودی یک کامپوننت استفاده می‌شه. به جای اینکه هر بار که کامپوننت رندر می‌شه مجدداً این محاسبات انجام بشه، می‌تونیم از useMemo استفاده کنیم تا این مقدار رو یکبار محاسبه کنیم و سپس نتیجه رو ذخیره کنیم تا در زمان‌های بعدی استفاده بشه 😉

به عنوان یک مثال، فرض کنید که ما یک کامپوننت داریم که لیست پست های کاربران رو نمایش می‌ده. ما می‌توانیم از useMemo برای ذخیره نتیجه‌ی محاسباتی مرتبط با لیست پست ها استفاده کنیم تا از دوباره محاسبه کردن زمان‌بر در هر بار رندر ممانعت کنیم و عملکرد سریع‌تری داشته باشیم. همچنین می‌تونیم از useMemo برای حفظ حالت‌های قبلی لیست پست ها استفاده کنیم و این جلوی رندر مجدد کامپوننت رو بگیریم.

import React, { useMemo } from 'react';

const PostList = ({ posts }) => {
  const sortedPosts = useMemo(() => {
    return posts.sort((a, b) => a.date - b.date);
  }, [posts]);

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

export default PostList;

در این مثال، ما از useMemo برای مرتب سازی لیست پست ها بر اساس تاریخ استفاده کردیم. useMemo به ما کمک می‌کنه تا هر بار که posts تغییر می‌کنه، مقدار sortedPosts رو دوباره محاسبه کنیم.

➕ با استفاده از useMemo می‌تونیم از بهینه سازی عملکرد کامپوننت‌های React خودمون بهره مند بشیم و استفاده نادرست از حافظه رو کاهش بدیم.

#پست_پیشنهادی
#javascript #react #usememo
☕️ @CodeExplore