[Suggestion]: Should server functions be wrapped in transitions? (conflicting info in the docs)

[gmoniava]

Summary

Here it says:

When using a Server Function outside a form, call the Server Function in a Transition, which allows you to display a loading indicator, show optimistic state updates, and handle unexpected errors

Which seems to suggest we should always wrap server functions in transitions when using them outside forms.

However here is example from docs without wrapping them in transitions:

// Server Component
import Button from './Button';

function EmptyNote () {
  async function createNoteAction() {
    // Server Function
    'use server';
    
    await db.notes.create();
  }

  return <Button onClick={createNoteAction}/>;
}

// Client 
"use client";

export default function Button({onClick}) { 
  console.log(onClick); 
  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
  return <button onClick={() => onClick()}>Create Empty Note</button>
}

Can docs make it clearer which to use?

Page

https://react.dev/reference/rsc/use-server#calling-a-server-function-outside-of-form
https://react.dev/reference/rsc/server-functions#creating-a-server-function-from-a-server-component

Suggestion

It should be made more clear whether both approaches are allowed or not and if allowed, what are pros cons of each.

---

PS. Initially I had opened this issue as typo/mistake but I guess Suggestion is a better fit, changed title, but old label remains.