How a fetch should be performed in react hooks?
Among these two code snippets, which one is called a best practice or a best react pattern to perform a fetch?

This example is using `useEffect` to perform a `fetch` operation.

```
import React, { useState, useEffect } from "react";

export default function App() {
  const [query, setQuery] = useState("");
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);

  useEffect(() => {
    if (!loading) return;
    const fetchData = async () => {
      const response = await fetch(
        `https://api.github.com/search/repositories?q=${query}`
      );
      const data = await response.json();
      setData(data.items);
      setLoading(false);
    };
    fetchData();
  }, [loading, query]);

  const onSubmit = e => {
    e.preventDefault();
    setLoading(true);
  };

  return (
    <div className="App">
      <h1>Search Github Repo.</h1>
      <h3>Implementation One</h3>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          value={query}
          onChange={e => setQuery(e.target.value)}
        />
        <button type="submit">Search</button>
      </form>
      {loading && <div>Loading...</div>}
      {!loading &&
        data.map(repo => (
          <div key={repo.id}>
            <h4>{repo.name}</h4>
            <p>{repo.description}</p>
          </div>
        ))}
    </div>
  );
}

```

This example is using the `onClick` event handler to perform a `fetch` operation.

```
import React, { useState } from "react";

export default function App() {
  const [query, setQuery] = useState("");
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);

  const onSubmit = e => {
    e.preventDefault();
    setLoading(true);
    const fetchData = async () => {
      const response = await fetch(
        `https://api.github.com/search/repositories?q=${query}`
      );
      const data = await response.json();
      setData(data.items);
      setLoading(false);
    };
    fetchData();
  };

  return (
    <div className="App">
      <h1>Search Github Repo.</h1>
      <h3>Implementation Two</h3>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          value={query}
          onChange={e => setQuery(e.target.value)}
        />
        <button type="submit">Search</button>
      </form>
      {loading && <div>Loading...</div>}
      {!loading &&
        data.map(repo => (
          <div key={repo.id}>
            <h4>{repo.name}</h4>
            <p>{repo.description}</p>
          </div>
        ))}
    </div>
  );
}

```

Running example in [codesandbox](https://codesandbox.io/s/react-fetch-qe3l5)