How to fetch data on page load and then on button click with useEffect

Question

I'm trying to implement the simple pattern of:

GET list
enter new item, save
make POST request
make new GET request for updated data

Starting with the code from here,

const useApi = () => {
  const [data, setData] = useState({ hits: [] });
  const [url, setUrl] = useState(
    'https://hn.algolia.com/api/v1/search?query=redux',
  );

  useEffect(() => {
    const fetchData = async () => {
        const result = await axios(url);
        setData(result.data);
    };

    fetchData();
  }, [url]);

  return [{ data }, setUrl];
}

it's easy enough to make the initial fetch on page mount

  const [{ data }, doFetch] = useDataApi(
    'https://hn.algolia.com/api/v1/search?query=redux',
    { hits: [] },
  );

but what I don't understand is how to do a 'refresh' of the data. Since there's no stateful variable that determines if the hook should re-run, how can I manually invoke the hook on a button click?

rrd · Accepted Answer · 2019-08-15 07:32:43Z

3

Use a separate variable like a simple count mechanism:

const [count, setCount] = useState(0);

<button onClick={() => setCount(count + 1)} />

Then use 'count' as the stateful variable, as well as the url (if the user searched for something different):

useEffect(() => {
  const fetchData = async () => {
    const result = await axios(url);
    setData(result.data);
  };

  fetchData();
}, [url, count]);

answered Aug 15, 2019 at 7:32

rrd

5,9873 gold badges32 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Austin Gayler Over a year ago

This works but feels anti-patterny. Is this the correct way to do this?

rrd Over a year ago

Well it's an odd case in that the data should be updated on the button click. You can't be guaranteed that if you passed the url in from the button for example, that it would be different from the previous click (someone clicking twice). So this is a compromise I suppose, not necessarily anti-pattern.

Austin Gayler Over a year ago

I feel like it's a pretty common use case--say you just want a "refresh" button.

Austin Gayler Over a year ago

For anybody else looking at this problem, take a look at the use-hooks/react-hooks-axios source code. It uses the same approach but keeps the count internal and exposes a reFetch function that modifies it.

rrd Over a year ago

Nice one @ahota

devserkan · Accepted Answer · 2019-08-15 12:03:48Z

Here is a different approach. Maybe there is a better way but in this situation, it seems working.

You can return fetchData from the useDataApi and then use it in the onClick handler and look for the URL change by the help of useRef. In order to do that you should move fetchData outside of the useEffect and wrap it with useCallback

  ...
  const fetchData = useCallback(
    async () => {
      setIsError(false);
      setIsLoading(true);

      try {
        const result = await axios(url);
        setData(result.data);
      } catch (error) {
        setIsError(true);
      }

      setIsLoading(false);
    },
    [url],
  );


  useEffect(() => {
    fetchData();
  }, [url, fetchData]); // add fetchData here as a second dependency

  return [{ data, isLoading, isError }, setUrl, fetchData]; // add fetchData here as the third returned variable.
};

Then in your App you can use refs to check if the URL is not changed:

function App() {
  const [query, setQuery] = useState('redux');
  const latestQuery = useRef(query); // define the ref
  const [{ data, isLoading, isError }, doFetch, fetchData] = useDataApi(
    'https://hn.algolia.com/api/v1/search?query=redux',
    { hits: [] },
  );

  return (
    <Fragment>
      <form
        onSubmit={event => {
          // check the query change
          if (latestQuery.current === query) {
            fetchData();
          }
          doFetch(
            `https://hn.algolia.com/api/v1/search?query=${query}`,
          );

          // set current query to the ref value
          latestQuery.current = query;

          event.preventDefault();
        }}
      >
      .....

I'm not quite sure this is a better solution since I'm still learning the hooks myself, too :)

Tucker Blackwell · Accepted Answer · 2019-08-16 02:16:42Z

0

I think the flow you describe could be simplified if, after making your initial api request, an action is dispatched to fetch the latest data that's available. Subsequently, the request should be made every time the component mounts, that way your component is not responsible for making sure it has the most updated data. This flow would look something like:

1) GET list

2) enter new item, save

3) make POST request

4) have an operation (outside of the consuming component) handle the response, and if it's successful, dispatch an action to refire the initial GET list call and if not, a call to handle the error.

answered Aug 16, 2019 at 2:16

Tucker Blackwell

1

Collectives™ on Stack Overflow

How to fetch data on page load and then on button click with useEffect

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related