Should have a queue. This is likely a bug in React. Please file an issue

[metamn]

Do you want to request a feature or report a bug?

Report a bug.

What is the current behavior?

I've received this 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. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

Tried to reproduce in Sandbox but was unsuccessful: https://codesandbox.io/s/admiring-mayer-2uiiu

Please checkout this repo frozen with this bug above: https://github.com/metamn/react-best-practices/releases/tag/v0.0.1

The bug appeared after adding useMemo in src/components/PlaceholderText/PlaceholderText.js

/**
   * Generates the text rows
   */
  const textRows = useMemo(
    () =>
      [...Array(numberOfRows)].map(i => {
        /**
         * Generates a random uuid
         */
        const id = uuid.v4();

        return {
          id: id,
          text: textRow
        };
      }),
    [numberOfRows, textRow]
  );

What is the expected behavior?

To render the component as usual

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

react": "^16.9.0
Firefox 68.0.2 (64-bit) Ubuntu
Ubuntu 18.04.3 LTS

[metamn]

In fact the bug appeared earlier in that file when another line was wrapped into useMemo:

const textRow = [...Array(rowLength)].map(i => content).join("");

into

const textRow = useMemo(
    () => [...Array(rowLength)].map(i => content).join(""),
    [content, rowLength]
  );

[gaearon]

Do you see any earlier warnings in the console before the crash?

[metamn]

Without useMemo I have a single, well known warning:

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: SideEffect(NullComponent) react-dom.development.js:12029

With useMemo I have these in plus:

Warning: React has detected a change in the order of Hooks called by Articles. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://fb.me/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useMemo                    useMemo
2. useMemo                    useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    in Articles (at LoadingDataApiAxios.js:128)
    in article (created by Article)
    in Article (created by Context.Consumer)
    in StyledComponent (created by Styled(Article))
    in Styled(Article) (at LoadingDataApiAxios.js:123)
    in LoadingDataApiAxios (created by Context.Consumer)
    in Route (at LoadingData.js:62)
    in section (created by Section)
    in Section (created by Context.Consumer)
    in StyledComponent (created by Styled(Section))
    in Styled(Section) (at LoadingData.js:37)
    in LoadingData (created by Context.Consumer)
    in Route (at App.js:26)
    in Switch (at App.js:24)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:23)
    in App (at src/index.js:6)

The above error occurred in the <Articles> component:
    in Articles (at LoadingDataApiAxios.js:128)
    in article (created by Article)
    in Article (created by Context.Consumer)
    in StyledComponent (created by Styled(Article))
    in Styled(Article) (at LoadingDataApiAxios.js:123)
    in LoadingDataApiAxios (created by Context.Consumer)
    in Route (at LoadingData.js:62)
    in section (created by Section)
    in Section (created by Context.Consumer)
    in StyledComponent (created by Styled(Section))
    in Styled(Section) (at LoadingData.js:37)
    in LoadingData (created by Context.Consumer)
    in Route (at App.js:26)
    in Switch (at App.js:24)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:23)
    in App (at src/index.js:6)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. index.js:1375

Error: Should have a queue. This is likely a bug in React. Please file an issue.

[threepointone]

I noticed that you used PlaceholderText 'wrongly' as a regular function in this spot https://github.com/metamn/react-best-practices/blob/d077ac5040e689029dc007128dd50612bc02fb3c/src/components/LoadingDataApiAxios/LoadingDataApiAxios.js#L48 Similarly, this usage of ArticlesPlaceHolder in this doc https://github.com/metamn/react-best-practices/blob/d077ac5040e689029dc007128dd50612bc02fb3c/src/components/Memoization/Memoization.stories.mdx . This will break stuff badly, especially with hooks (you might notice that they don't even show up in devtools), and I'm certain it's causing you the issues you mention here. I recommend you audit your codebase and make sure you're not using any components as regular functions (without jsx).

[metamn]

Thank you for your answer! I'm not sure I'm getting it :) Sorry. What I didn't get is wrongly and 'will break stuff badly

However I'm trying to focus on make sure you're not using any components as regular functions (without jsx) in the context of PlaceholderText ... which is a regular function by design. What makes it to be a component?

I know this is not a tutorial forum so please don't bother with the question if doesn't contribute to the solution.

[Dergash]

Hello @metamn! I don't think it's a bug.

What I didn't get is wrongly and will break stuff badly

I believe you did broke rules of hooks by nesting your useMemo calls, and there is a correct console warning about it:

As pointed out by @threepointone, your

const placeholder = PlaceholderText(props);

assignment didn't actually created a component, you used it as a function that returns an array of { id: string, text: string } objects.

Then you did some mapping and return ArticlesPlaceholder, which is also not a functional component but a function that returns an array of { objectID: string, url: string, title: string } objects.

Then you call it inside another useMemo:

const articlesPlaceholder = useMemo(
    () => ArticlesPlaceholder(placeholder), [placeholder]
);

So, inside useMemo you have a function ArticlesPlaceholder which internally calls a function PlaceholderText which internally has another useMemo, which is directly prohibited:

Don’t call Hooks inside loops, conditions, or nested functions.

---

About components:

PlaceholderText ... which is a regular function by design. What makes it to be a component?

I believe the function becomes a function component when it's returned by React.createElement :

// either by JSX syntax:
const functionComponent = <PlaceholderText { ...props } />;
// or directly (you JSX transpiler usually do the job of converting JSX syntax
// into React.createElement calls for you:
const functionComponent = React.createElement(PlaceholderText, [props]);

Also function could become a function component when a function itself returns React.createElement call (either JSX.element or an array of JSX elements). That is also not applicable in your case because your PlaceholderText function returns an array of simple objects.

edit: I think the main problem with your approach is that you are treating your PlaceholderText as UI component because you want to memoize some logic, when in fact it is not a component but more like a data that mapped into UI components later.
I've submitted an example merge request that should help to demonstrate how to keep memoization while avoiding nesting useMemo calls. There are of course other ways to handle it.

[metamn]

@Dergash Thank you very much! Both for the clear answer and the pull request. Up until now this was my best experience ever in this field. Thanks again and keep up!!!

P.S. All works now and no more warnings and error message.

[WebApp07]

Hi bro, You need to use 👍
import {useReducer } from "react";
so then create function reducers
const reducer = (state,payload) => {}....
/
/