توابع غیر همزمان

برای این مورد نیازی به استفاده از 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 استفاده کرد

سلام

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

به صورت کلی بخوام بگم عملیات های 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>
	);

}