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

[justin0022]

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.

[gaearon]

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

[justin0022]

I went to reproduce in CodeSandbox and the linter immediately told me that I was using a conditional in useEffect. Definitely will be adding the linter to my project now...

Thanks!

[gaearon]

The error message is still weird so I would appreciate a link.

[justin0022]

Sure, I'll send a link shortly.

[justin0022]

https://codesandbox.io/s/y3xyq6wx21?fontsize=14

In the browser console, you'll see Invariant Violation: Should have a queue. This is likely a bug in React. Please file an issue.

Hope this helps.

[justin0022]

In my application, I didn't get the other error messages that the CodeSandbox link shows.

Here are the error messages from my app:

[LexSwed]

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

[justin0022]

Hey @LexSwed, thanks, I already fixed this error - @gaearon asked me to reopen the issue because he said the error message looked strange.

[threepointone]

I'm curious why you didn't see the other error messages in your app (specifically about the change in order). Closing this for now, but we may revisit if this happens again in the future, or if you have any new information to share. Thanks!