• Notes from React RFC for first class support for promises

  • React client components cant be asynchronous, in React 18 if you need to run some async code you can now make use of the use hooks. This hook is special. For one thing. It can be used conditionally, which breaks one of the rules of hooks.

function Note({id, shouldIncludeAuthor}) {
  const note = use(fetchNote(id));

  let byline = null;
  if (shouldIncludeAuthor) {
    const author = use(fetchNoteAuthor(note.authorId));
    byline = <h2>{author.displayName}</h2>;
  }

  return (
    <div>
      <h1>{note.title}</h1>
      {byline}
      <section>{note.body}</section>
    </div>
  );
}

reminder of how to handle double fetching in client side react when using useEffect

useEffect(() => {  

  let ignore = false;  

	async function startFetching() {  
		const json = await fetchTodos(userId);  
		if (!ignore) {  
			setTodos(json);  
		}  
	}  

	startFetching();  

	return () => {  
		ignore = true;  
	};  

}, [userId]);

• https://react.dev/learn/synchronizing-with-effects#fetching-data