Server Actions

export const Form = ({ user }: { user: { name: string } }) => {
  const [optimisticUser, optimisticRegister] = useOptimistic(
    user,
    (state, name: string) => ({ name, isOptimistic: true }),
  );
  const formRef = useRef<HTMLFormElement>(null);

  if (!optimisticUser?.name) {
    return (
      <div>
        <h2>Optimistic updates</h2>

        <form
          action={async (formData) => {
            const name = formData.get('name');
            formRef.current && formRef.current.reset();
            optimisticRegister(name as string);
            await register(formData);
          }}
          ref={formRef}
        >
          <FormContent>
            <label>
              Enter your name:
              <input type="text" name={'name'} />
            </label>
            <button>Submit</button>
          </FormContent>
        </form>
      </div>
    );
  }

  return (
    <form action={logout}>
      <h3>Hello, {optimisticUser.name}!</h3>
      <button>Logout</button>
    </form>
  );
};