تابستون داره تموم میشه ها، فرصت‌ها محدودن کلی آفر جذاب در کمپین تابستون🔥👇
۰ ثانیه
۰ دقیقه
۰ ساعت
۳ حسین مولاپور
توابع غیر همزمان
مجتبی سوری حل شده توسط مجتبی سوری

سلام

چطوری میتونیم از یک تابع async در useMemo استفاده کنیم؟ 

سلام

اگر شفاف‌تر اون موردی که میخوای انجام بدی رو بگی بهتر میتونم کمکت بکنم!

به صورت کلی بخوام بگم عملیات‌های async رو با استفاده از useEffect میشه انجام داد و اگر هدف این که خود اون تابع رو فقط memoization روش انجام بدی میتونی از useCallback استفاده بکنی یا داخل useMemo اون تابع رو return بکنی

مجتبی سوری ۱۷ اردیبهشت ۱۴۰۰، ۰۵:۴۶

مثلا در کد زیر نمیتونیم از memoPost در قسمت return کامپوننت post استفاده کنیم چون یک promise رو بر میگردونه؟

 

export default function Post(props) {
	async function getPost(id) {
		const res = await fetch(`...posts/${id}`);
		return (await res.json());
	}
	const memoPost = useMemo(() => getPost(postId) ,[postId]);
	return (
		<div>
			{
				memoPost.body
			}
		</div>
	);
}

 

 

حسین مولاپور ۱۷ اردیبهشت ۱۴۰۰، ۰۷:۴۴

برای این مورد نیازی به استفاده از useMemo نیست! کلا احتیاجی  به این نوع بهینه سازی‌ها نیست. این کد رو میشه به روش زیر نوشت! البته این چیزی که من نوشتم یک ره حل و باید با توجه شرایط راه حل بهینه رو انتخاب کرد:


function Post({id}) {
  const [post, setPost] = useState()
  useEffect(() => {
    const getPost = async () => {
      const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
      setPost(await post.json())
    }
    getPost()
  }, [id])
  return (
    <div>
      {post && post.title}
    </div>
  )
}

اگر هم بخوای میشه از useCallback یا useMemo استفاده کرد که البته در اینجا نیازی نیست ولی برای نمونه اون رو هم مینویسم که ببینی به چه صورتی میشه نوشت:

function Post({id}) {
  const [post, setPost] = useState()
  const getPost = useCallback(
    async () => {
      const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
      setPost(await post.json())
    },
    [id],
  )
  useEffect(() => {
    getPost()
  }, [getPost, id])
  return (
    <div>
      {post && post.title}
    </div>
  )
}

اگر بخوام یک قانون کلی در این زمینه بگم اولویت با این هست که اون تابعی که داریم از بدنه کامپوننت خارج بکنیم ولی اگر وابستگی داشت اون رو منتقل بکنیم به داخل useEffect و در اخر اگر نیاز داشتیم که خارج از useEffect باشه میشه از useCallback استفاده کرد

بهترین پاسخ
مجتبی سوری ۱۷ اردیبهشت ۱۴۰۰، ۰۸:۰۴