Benefit of handling forms via actions vs within a component

[andy-zhou]

What are situations where using actions makes more sense than making network calls in a component and vice versa?

Actions:

const router = createBrowserRouter([
  {
    id: 'root',
    path: '/',
    Component: () => {
      const fetcher = useFetcher();
      return <fetcher.Form method='post' action='/submit-form'>
        <input type='text' name='foo' />
        <button type='submit'>
          Submit
        </button>
      </fetcher.Form>
    },
    children: [
      {
        id: 'submit-form',
        path: '/submit-form',
        action: async ({ request }) => {
          const formData = await request.formData();
          const fooValue = formData.get('foo');
          await makeNetworkCall({foo: fooValue});
        }
      }
    ]
  }
])

Within Component:

const router = createBrowserRouter([
  {
    id: 'root',
    path: '/',
    Component: () => {
      const [makeNetworkCall, loading] = useNetworkCall();
      const [fooValue, setFooValue] = useState();

      return <>
        <input type='text' name='foo' onChange={(e) => {
          setFooValue(e.target.value)
        }}/>
        <button type='submit' disabled={loading} onClick={() => {
          makeNetworkCall({foo: fooValue})
        }}>
          Submit
        </button>
      </>
    }
  }
])

It appears that the main benefit to actions is that we abstract the network handling behind something that looks like HTML / HTTP vs doing the legwork ourselves. Is that correct?

[0xR]

I wonder the same. Especially compared to a solution like react-hook-form