Using useSelect creates "minified React error"

Question

I'm working on a Gutenberg block that will be a dropdown menu of all posts on the site. I used @wordpress/create-block (version 4.4.0) for the scaffolding. When I try to use the useSelect function, it get "This block has encountered an error and cannot be previewed." in addition to an error:

I'm trying to use code that was previously successful, although that code did not use the @wordpress/create-block scaffolding (I built everything from scratch and the @wordpress/scripts npm).

Here's my code:

 import {useSelect} from "@wordpress/data"

 export default function Edit() {
    const allCPTposts = useSelect(select => {

        return select("core").getEntityRecords("postType", "post", {per_page: -1})
    })

    if(allCPTposts == undefined){
        return <p>Loading Posts...</p>
    }

    return (
        <p { ...useBlockProps() }>
            { __( 'Dropdown Menu – hello from the editor!', 'dropdown' ) }
        </p>
    );
}

I'm not able to even work on the JSX for the actual dropdown menu because of this error.

Any ideas? Thank you in advance!

Answer 1

If you check the URL given with the error message, you will see the full text as:

Rendered more hooks than during the previous render.

Inspecting the code, I see two uses of hooks:

export default function Edit() {
    const allCPTposts = useSelect(select => {
//                      ^ first hook use 
        return select("core").getEntityRecords("postType", "post", {per_page: -1})
    })

    if(allCPTposts == undefined){
        return <p>Loading Posts...</p>
    }

    return (
        <p { ...useBlockProps() }>
{/*             ^ second hook use */}
            { __( 'Dropdown Menu – hello from the editor!', 'dropdown' ) }
        </p>
    );
}

So it seems sometimes just useSelect() and sometimes both useSelect() and useBlockProps() are called.

Seeing that there is an early return before the second hook use, this is most likely the issue here. Just move the useBlockProps() call above the early return and the component will always call the same amount of hooks for each render.