How can I use the useFetch hook when a button is clicked?

user_9090417 0
Viewed 83

I am trying to make a request using useFetch from react-fetch-hook npm package when a button is pressed. Here is my code

import React, { useState } from 'react';
import useFetch from 'react-fetch-hook';
import { Button } from 'react-bootstrap';

const Component = () => {
  const [message, setMessage] = useState(false);

  const handleOnClick = () => {
    const { isLoading, data } = useFetch(
      'https://raw.githubusercontent.com/markmclaren2/sample_json/main/user.json'
    );
    if (isLoading) {
      setMessage('Loading...');
    } else {
      setMessage(`Received id: ${data.id}`);
    }
  };
  return (
    <div>
      <Button onClick={handleOnClick}>Load Data</Button>
      <div>{message}</div>
    </div>
  );
};

export default Component;

I encountered this error

React Hook "useFetch" is called in function "handleOnClick" that is neither a React function component nor a custom React Hook function.

What is the correct way to call useFetch when the user presses the button and show the "Loading..." and then the result messages?

reactjs javascript
2 Answers

useFetch is a hooks that wrap global fetch() method. It is considered as a custom React Hook by react because of its name

Custom Hooks are more of a convention than a feature. If a function’s name starts with ”use” and it calls other Hooks, we say it is a custom Hook.

So, the placement has to follow react custom hooks rules whether in a React function component or in a custom React Hook function.

As the document says that we can use depends options to trigger the fetch.

The request will not be called until all elements of depends array be truthy.

So, we can implement this by using isClicked state as the fetch trigger where the isClicked state will be reset by useEffect hooks. So, on every click event, the useFetch will make a new request to the server'

CodeSandbox

import React, { useEffect, useState } from 'react';
import useFetch from 'react-fetch-hook';

const Component = () => {
   const [isClicked, setIsClicked] = useState(false);
   const [message, setMessage] = useState('');

   // place the useFetch hooks here as the rules says
   const { isLoading, data } = useFetch(
      'https://raw.githubusercontent.com/markmclaren2/sample_json/main/user.json',
       { depends: [isClicked] }
   );

   useEffect(() => {
      isClicked && setIsClicked(false);
   },[isClicked]);

   useEffect(() => {
      if (isLoading) {
         setMessage('Loading ...');
      }
      if (data && !isLoading) {
         setMessage(`Received id: ${data.id}`)
      }
   },[data, isLoading])

   return (
      <div>
         <button onClick={() => setIsClicked(true)}>Load Data</button>
         <div>{message}</div>
      </div>
   );
}
user_81988730

Hello maybe do something like this:

import React, { useState } from "react";
import useFetch from "react-fetch-hook";
import { Button } from "react-bootstrap";

export default function App() {
  const [message, setMessage] = useState("");
  const [isClicked, setIsClicked] = useState(false);
  const {
    isLoading,
    data
  } = useFetch(
    "https://raw.githubusercontent.com/markmclaren2/sample_json/main/user.json",
    { depends: [isClicked], formatter: (response) => response.text() }
  );

  const handleOnClick = () => {
    setIsClicked(true);
    if (isLoading) {
      setMessage("Loading...");
    } else {
      setMessage(data as string);
    }
  };
  return (
    <div>
      <Button onClick={handleOnClick}>Load Data</Button>
      <div>{message}</div>
    </div>
  );
}

I also prepared a codesandbox here so you can check it out

user_141999910
Related