The lint rule for hooks assumes that things which start with "use" are hooks. Thus it thinks that useList is a hook and trying to enforce the rules of hooks on it. But it's not actually a hook, it's just a normal function, so you just need to give it a different name and the lint rule will be satisfied.
function useListProvider = () => {
const { makeRequest } = useConnections();
const callback = React.useCallback(async (props) => {
const response = await makeRequest(props);
return { body: response.body };
}, [makeRequest])
return { callback };
}
// elsewhere:
const { callback } = useListProvider();
React.useEffect(() => {
if (!isBusy) {
callback();
setIsBusy(false);
}
}, [callback]);
Why is it not a hook? Well, a hook is either one of the built in hooks, or a function that calls one of the built in hooks. Your callback doesn't meet those criteria. It was created by useCallback, but that just means it's a memoized function, not a hook.
Answer from Nicholas Tower on Stack OverflowReddit
reddit.com › r/react › async function in useeffect vs usecallback
r/react on Reddit: async function in useEffect vs useCallback
June 17, 2025 -
I have an async function that needs to be called when some state values evaluate to true. Is there any large difference in defining the async function in the use effect and calling it as opposed to defining it in a useCallback and then just calling the return from the useCallback in a useEffect?
// defined in useEffect
useEffect(() => {
const asyncFunc = asyc () => { // do something};
asyncFunc();
}, [dependencyArray]);vs
// defined in useCallback
const callBackFunc = useCallback(async () => {
// do something
}, [dependencyArra]);
useEffect(() => {
callBackFunc();
}, [callBackFunc]);Medium
pgarciacamou.medium.com › async-react-usecallback-ab80ebff7235
Async React useCallback.. Use asynchronous callbacks with… | by Pablo Garcia | Medium
August 6, 2023 - This is useful to get out of a “callback hell” scenario using async-await. function useDelay(time = 1000) { return React.useCallback(async () => { return await new Promise((resolve) => { setTimeout(resolve, time); }); }, [time]); }
Videos
Learn useCallback in 11 Minutes - React Hooks Simplified
Learn React Hooks: useCallback - Simply Explained!
28:17
How Async Javascript works (Callback Hell, Promises, Async Await, ...
01:37:52
React Hooks Tutorial | useState, useEffect, useReducer, useCallBack, ...
11:26
React Tutorial 44 - React Hooks | useCallBack() | Using the ...
25:36
Async React Hooks - YouTube
React
react.dev › reference › react › useCallback
useCallback – React
On the following renders, React will compare the dependencies with the dependencies you passed during the previous render. If none of the dependencies have changed (compared with Object.is), useCallback will return the same function as before.
React Hooks Library
react-hooks-library.vercel.app › core › useAsyncCallback
useAsyncCallback — React Hooks Library
Returns a current execution state of an async function, Use it to orchestrate async actions in UI. import { useCallback } from 'react' import { useAsyncCallback } from '@react-hooks-library/core' const sleep = (ms: number) => new Promise((resolve) ...
Medium
medium.com › @mohammedsafir17 › understanding-usecallback-hook-in-react-best-practices-and-examples-dfea3af6f779
Understanding useCallback Hook in React: Best Practices and Examples | by Mohammed Safir | Medium
February 8, 2024 - Absolutely! useCallback can be used with any type of function, including async functions.
Hacker News
news.ycombinator.com › item
Lead says async func in useCallback is incorrect, use useMemo instead, WTF? | Hacker News
September 19, 2023 - I submitted a PR review containing an async function in a React useCallback earlier and our tech lead mentioned that: · It was always my understanding that useCallback returned a memoised function and useMemo a memoised result or am I missing something here
DEV Community
dev.to › a1guy › the-definitive-react-19-usecallback-guide-patterns-pitfalls-and-performance-wins-ce4
The Definitive React 19 useCallback Guide — Patterns, Pitfalls, and Performance Wins - DEV Community
August 18, 2025 - If you pass a function into a useEffect or useMemo dependency array, React will re-run the effect or memoization if the function reference changes. useCallback ensures that the function remains stable and the effect is only triggered when necessary.
CodeJournal
saje.hashnode.dev › usecallback-hook
Beginner's guide to the useCallback React Hook - All you need to know
December 10, 2022 - The useCallback hook, on the other hand, returns a memoized (cached) version of a function, ensuring that it is only recreated if one of its dependencies changes.This allows us to isolate resource intensive functions so that they will not automatically run on every render.
Mimo
mimo.org › glossary › react › usecallback-hook
React useCallback Hook: Syntax, Usage, and Examples
This pattern is useful when passing async callbacks to event handlers or effects that need stable references. It can also be used with caching logic or a custom hook that manages API data more efficiently. The dependency array is essential. If you leave it out or include unstable values, useCallback won’t behave as expected.
React
legacy.reactjs.org › docs › hooks-reference.html
Hooks API Reference – React
Pass an inline callback and an array of dependencies. useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that ...
Hygraph
hygraph.com › blog › react-usecallback-a-complete-guide
React useCallback() - A complete guide | Hygraph
January 21, 2026 - Optimizing performance in lists: When rendering a list of items, you might need to pass a callback to each item. Using useCallback() ensures that the same callback instance is passed to each item, preventing unnecessary re-renders.
Jan Hesters
janhesters.com › blog › usecallback-vs-usememo
useCallback vs. useMemo
The difference is that useCallback returns its function when the dependencies change while useMemo calls its function and returns the result.
DEV Community
dev.to › jasmin › how-to-use-async-function-in-useeffect-5efc
How to use async function in useEffect? - DEV Community
June 20, 2022 - Defining async function outside useEffect. const [state, setState] = useState(0) const fetchData = useCallback(async()=> { const data = await getData(); setState(data) }, []) useEffect(() => { fetchData() }, [fetchData]);
React
react.dev › reference › react › use
use – React
async and await pick up rendering from the point where await was invoked, whereas use re-renders the component after the data is resolved.
Amberwilson
amberwilson.co.uk › blog › how and when to use react usecallback()
How and when to use React useCallback() | Amber Wilson
December 22, 2020 - A good way to approach using useCallback is reactively rather than proactively. This means that, depending on your components, use it when you obviously need to, and not as a premature performance optimization.
W3Schools
w3schools.com › js › js_callback.asp
W3Schools.com
Asynchronous callbacks are executed at a later time, allowing the main program to continue running without waiting.
Dead Simple Chat
deadsimplechat.com › blog › react-usecallback
React useCallback
August 5, 2023 - In this blog post, we will see how to use React useCallback hook.
Devtrium
devtrium.com › posts › async-functions-useeffect
How to use async functions in useEffect (with examples) - Devtrium
August 14, 2021 - But if the function isn't wrapped in useCallback, it will update on every re-render, and thus trigger the useEffect on every re-render. Which is rarely what you want! · · · // declare the async data fetching function const fetchData = useCallback(async () => { const data = await fetch('https://yourapi.com'); setData(data); }, []) // the useEffect is only there to call `fetchData` at the right time useEffect(() => { fetchData() // make sure to catch any error .catch(console.error);; }, [fetchData]) ·
DhiWise
dhiwise.com › blog › design-converter › react-useasync-best-practices-for-smooth-data-handling
Mastering React UseAsync: Best Practices For Data Fetching
March 28, 2025 - What is useAsync React? useAsync is not a built-in React hook but rather a custom hook that developers can create to handle asynchronous operations efficiently.