Is `fetcher.load` the same as a GET submit?

  Kiến thức lập trình

I try to understand why there is fetcher.load and when to use it.
According to the doc, fetcher.load calls the route’s loader. But this is also what fetcher.submit({method: 'GET'}) does. In the following experiment, I don’t see any difference. Are there any scenarios under which these two behave differently?

const loader: LoaderFunction = ({request}) => {
  const url = new URL(request.url)
  console.log("calling loader");
  const data = {"key":"value", url: url}
  return data

export const App = () => {
  const fetcher = useFetcher();
  const fetcher2 = useFetcher();

  const handleClick = () => {

  return (
      <button onClick={handleClick} >
        click me 
      <pre>{ JSON.stringify(, null, 2) }</pre>
      <hr />
      <fetcher2.Form method="GET" action="/query-data">
        <input name="input" value="abc" type="text" readOnly />
        <button type="submit"> submit </button>
      <pre>{ JSON.stringify(, null, 2) }</pre>
const root = createRoot(document.getElementById('app'));

const router = createBrowserRouter([
    path: "/",
    element: <App />,

  { /*resource route*/
    path: "/query-data",
    loader: loader

    <RouterProvider router={router} />

The complete code is in stackblitz