score:1

Accepted answer

the issue here is, that you can only use hooks directly inside the root of your component. it's the number 1 'rule of hooks'. you can read more about that here

  const getmore = () => {
    setkanyequote(usefetch(kanye) /* this cannot work! */)
  }

there are a few ways you could work around that. without knowing the internal logic in your usefetch-hook i can only assume you are able to change it.

change hook to handle its state internally

one way to work around that would be to change the logic of your custom usefetch hook to provide some form of function that fetches the data and updates the state internally. it could then look something like this:

const { data, dofetch } = usefetch(kanye);
useeffect(() => {
  dofetch(); // initialfetch
}, []);

const getmore = () => {
  dofetch();
};

// ...

you would then need to change the internal logic of your usefetch-hook to use usestate internally and expose the getter of it. it would look something like this:

export const usefetch = (url) => {
  const [data, setdata] = usestate(null);

  const dofetch = () => {
    // do your fetch-logic
    setdata(result);
  };

  return { data, dofetch };
};

change hook not to handle any state at all.

if you only want to manage the state of the loaded data in the parent component, you could just provide the wrapped fetch function through the hook; something like that:

const dofetch = usefetch(kanye);
const [data, setdata] = usestate(null);
useeffect(() => {
  setdata(dofetch()); // initialfetch
}, []);

const getmore = () => {
  setdata(dofetch())
};

// ...

you would then need to change the internal logic of your usefetch-hook to not have any internal state and just expose the wrapped fetch. it would look something like this:

export const usefetch = (url) => {  
  const dofetch = () => {
    // do your fetch-logic
    return result;
  };

  return dofetch;
};

Related Query

More Query from same tag