score:1
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;
};
Source: stackoverflow.com
Related Query
- How can I re-fetch an API using react hooks
- Does using React Hooks drastically reduce how code can be reused in React / Redux?
- How to set timeout in Fetch API using react js
- How to manage async functions using React Hooks API
- How can show and hide react components using hooks
- How to avoid unnecessary render in React using Hooks API
- Using React Hooks useReducer, how can I update an object by ID efficiently?
- How can we create more than one Reducers using React-Redux Hooks API using useSelector() and useDispatch()?
- How to integrate axios api in react js with async and await using react hooks
- Using react hooks how can a user navigates to protected routes based on admin access
- How to fetch sequence api calls where second api call need particular data from first api call result using react hooks?
- How can i validate input field in react using regular expression via hooks
- React App: How to display data from api using fetch
- How to call API and stores results in a state when a form submit is clicked using react hooks
- How to get 5 day weather forecast using React Hooks and OpenWeatherMap API
- How to fix multiple call fetch data in forEach() using React Hooks
- How to fetch data from api in React by using axois?
- how to fetch image from the API using react js
- Best way to fetch data from a REST api using react hooks and context for state management?
- REACT : How can we Upload Image and Input text using Fetch or Axios in a single click function
- How to reuse data fetching logic from api using react custom hooks
- how to fetch api data using react js
- how to fetch api data dynamically on the basis of click using react js
- How can I ensure that a line of code is executed only once using React hooks in a functional component?
- How to fetch data from Web API using React query?
- How can i fetch graphql api endpoint data in react with class components?
- How can I pass data to an object using React Hooks and Redux
- How to fetch a data without using useffect or setTimeout and add loader in react hooks
- How to remove repeatable API results when using react-infinite-scroll and react hooks
- How can I fetch data from an array of objects, pass it through an API end point to .fetch() the needed object value using React?
More Query from same tag
- problem with creating store and then passing values to mapStateToProps
- Ignore flowtype error when using specific pattern
- Type declaration preference for React components
- Gatsby's `navigate` function to navigate to the same page?
- *Help* Convert class to functional component using hooks
- React jsx attribute avoid duplicate attribute name
- cannot fetch firestore data from react app
- Updating document title without hooks
- how to use events in react html parser
- Loop through array in react onclick using Hooks
- Importing individual components in a React app
- Property "id" does not exist on type "MyProps" (typescript)
- React change state based on select option
- React how to re-render a placeholder on button click
- How to find memory leaks in an app written in react
- Performance between direct key access and object destructuring
- Duplicate components by button
- docker-compose up exit with code 0 for react js
- pass props between react components
- If all fields on Form successfully validate, page crashes
- Need a workaround for Adobe SnapSVG-animator running in React.js
- what <Carousel.Item> means?
- How to click on markers in Google-Map-React?
- Is it bad practice to use an object property instead of the object as a dependecy in the useEffect hook?
- How to fetch data from server with redux?
- html form input method get prevent name in url if value is not filled
- Confusion with props passed into render in React R
- How to test select option logic with React Testing Library
- connect multiple combined reducers in redux with conditional
- ComponentDidMount vs ComponentWillMount?