React custom hook "Should have a queue. This is likely a bug in React" error message.
See original GitHub issueDo you want to request a feature or report a bug? Bug
What is the current behavior? Getting this error message: Should have a queue. This is likely a bug in React. Please file an issue.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React.
I tried to implement a simple data cache in a custom hook:
import { useState, useEffect } from 'react'
const get = url => {
return fetch(url)
.then(res => res.text())
.then(data => JSON.parse(data))
}
const cache = new Map()
const useData = dataURL => {
const [data, setData] = useState(null)
if (cache.has(dataURL)) {
return cache.get(dataURL)
}
useEffect(() => {
get(dataURL).then(data => {
cache.set(dataURL, data)
setData(data)
})
}, [dataURL])
return data
}
export default useData
The entire project code is here: https://github.com/justin0022/dashboard/tree/cache
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? Using React 16.8.2, Chrome, and MacOS.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:2
- Comments:12 (3 by maintainers)
Top Results From Across the Web
Should have a queue. This is likely a bug in React. Please file ...
I've received this message: "Should have a queue. This is likely a bug in React. Please file an issue." If the current behavior...
Read more >Error: Should have a queue. This is likely a bug in React ...
I am using react-i18next . Sometime on init function component facing React issue. Any idea what may causing it? My config import i18n...
Read more >Should have a queue. This is likely a bug in React. Please file ...
Coding example for the question Error: Should have a queue. This is likely a bug in React. Please file an issue-Reactjs.
Read more >Invalid Hook Call Warning - React
Invalid Hook Call Warning. You are probably here because you got the following error message: ... Call them at the top level in...
Read more >Error: Should Have A Queue. This Is Likely A Bug In ... - ADocLib
React in itself has a very small API, and you basically need to When you run npx create-react-app <app-name> , npx is going...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
linter says to me that you have
returnfrom your function earlier than running effect hook As one of the rules of hooks states, you have to preserve hooks call order between renders.BTW, if you want to check that second time you use hook, it takes value from cache - you need better structure, because on initial render there is no way for fetch to resolve before
data2 = useDatawill be run, hence won’t use cached value anywayPlease reduce this to a smaller isolated example, ideally on CodeSandbox. Thanks. Also please provide exact steps to reproduce.