React custom hook "Should have a queue. This is likely a bug in React" error message.

See original GitHub issue

Do 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:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:12 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
LexSwedcommented, Mar 4, 2019

linter says to me that you have return from your function earlier than running effect hook As one of the rules of hooks states, you have to preserve hooks call order between renders.

const useData = dataURL => {
  const [data, setData] = useState(null);

  useEffect(
    () => {
      if (!cache.has(dataURL)) { // won't run get if value already in cache
        get(dataURL).then(data => {
          cache.set(dataURL, data);
          setData(() => data);
        });
      }
    },
    [dataURL]
  );
  if (cache.has(dataURL)) { // this seems as a duplicate of data in state and in cache
    return cache.get(dataURL);
  }

  return data;
};

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 = useData will be run, hence won’t use cached value anyway

2reactions
gaearoncommented, Feb 28, 2019

Please reduce this to a smaller isolated example, ideally on CodeSandbox. Thanks. Also please provide exact steps to reproduce.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found