Rendered more hooks than during the previous render.

Answered

Yellowstripe scad posted this in #help-forum

Yellowstripe scadOP

2023-12-26T17:03:18.000Z

const [isLoading, setLoading] = useState(false)
    useEffect(() => {
        setLoading(true)
        if (session) {
            hasVoted()
            .then((voteStatus) => {
                if (voteStatus !== null) {
                    return (
                        router.push("/vote/already-voted")
                    )
                }
            })
            .catch((error) => {
                toast.error(error.message);
            });
            setLoading(false)
        }
    }, [session]);
    if (isLoading) {
        return (
            <Loading />
        )
    }

Unhandled Runtime Error
Error: Rendered more hooks than during the previous render.

Call Stack
updateWorkInProgressHook
file:///C:/Users/rapid/Documents/GitHub/keylib/.next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js (9999:31)
updateReducer
file:///C:/Users/rapid/Documents/GitHub/keylib/.next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js (10092:24)
updateState
file:///C:/Users/rapid/Documents/GitHub/keylib/.next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js (10513:20)
Object.useState
file:///C:/Users/rapid/Documents/GitHub/keylib/.next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js (11824:32)
Module.useState
file:///C:/Users/rapid/Documents/GitHub/keylib/.next/static/chunks/node_modules_next_dist_compiled_react_71459a._.js (1426:31)
VoteClient
file:///C:/Users/rapid/Documents/GitHub/keylib/.next/static/chunks/_61620c._.js (258:206)
renderWithHooks
file:///C:/Users/rapid/Documents/GitHub/keylib/.next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js (9739:28)
updateFunctionComponent
file:///C:/Users/rapid/Documents/GitHub/keylib/.next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js (14125:32)
beginWork$1
file:///C:/Users/rapid/Documents/GitHub/keylib/.next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js (15901:32)
beginWork
file:///C:/Users/rapid/Documents/GitHub/keylib/.next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js (22732:28)
performUnitOfWork
file:///C:/Users/rapid/Documents/GitHub/keylib/.next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js (21795:24)
workLoopSync
file:///C:/Users/rapid/Documents/GitHub/keylib/.next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js (21560:17)
renderRootSync
file:///C:/Users/rapid/Documents/GitHub/keylib/.next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js (21527:21)
recoverFromConcurrentError
file:///C:/Users/rapid/Documents/GitHub/keylib/.next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js (20860:30)
performConcurrentWorkOnRoot
file:///C:/Users/rapid/Documents/GitHub/keylib/.next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js (20814:46)
workLoop
file:///C:/Users/rapid/Documents/GitHub/keylib/.next/static/chunks/node_modules_next_dist_compiled_16d15d._.js (1958:48)
flushWork
file:///C:/Users/rapid/Documents/GitHub/keylib/.next/static/chunks/node_modules_next_dist_compiled_16d15d._.js (1936:28)
MessagePort.performWorkUntilDeadline
file:///C:/Users/rapid/Documents/GitHub/keylib/.next/static/chunks/node_modules_next_dist_compiled_16d15d._.js (2169:35)

Answered by Ray

move const [isLoading, setLoading] = useState(false) above if (status === "loading")

View full answer

14 Replies

Ray

2023-12-26T17:26:37.000Z

is this the full code?

@Ray is this the full code?

Yellowstripe scadOP

2023-12-26T17:27:54.000Z

thatâ€™s part of it, i added the loading stuff and then i got the error

do you want the full thing

Ray

2023-12-26T17:29:06.000Z

yes let me see

@Ray yes let me see

Yellowstripe scadOP

2023-12-26T18:16:06.000Z

"use client"
import {CheckboxGroup} from "@nextui-org/react";
import { CustomCheckbox } from "@/components/ui/CustomCheckbox";
import YoutubeEmbed from "@/components/switches/YoutubeEmbed";
import { Button } from "@nextui-org/react";
import React, { useState, useEffect } from "react";
import { useSession } from "next-auth/react";
import { Switch } from "@/lib/types";
import { useRouter } from 'next/navigation'
import hasVoted from "./hasVoted"
import { toast } from "sonner";
import Loading from "@/components/Loading";

export default function VoteClient({foundSwitch}: {foundSwitch: Switch}) {
    const router = useRouter()
    const { data: session, status } = useSession({
        required: true,
        onUnauthenticated() {
            router.push("/sign-in")
        },
    });
    if (status === "loading") {
        return (
            <Loading />
        )
    }
    const [isLoading, setLoading] = useState(false)
    useEffect(() => {
        setLoading(true)
        if (session) {
            hasVoted()
            .then((voteStatus) => {
                if (voteStatus !== null) {
                    return (
                        router.push("/vote/already-voted")
                    )
                }
            })
            .catch((error) => {
                toast.error(error.message);
            });
            setLoading(false)
        }
    }, [session]);
    if (isLoading) {
        return (
            <Loading />
        )
    }
    const [groupSelected, setGroupSelected] = useState<string[]>([]);
    const is4 = groupSelected.length < 4
    const is1 = groupSelected.length > 0
    return (
        <form className="mx-auto max-w-screen-xl flex min-h-screen mt-16 flex-col">
            <Button className='w-full mb-24' color="primary" type='submit'>
                Submit your Vote
            </Button>
            <div className="flex flex-row items-center flex-wrap">
                <p className="text-2xl">Vote for {foundSwitch.switch_name}'s Sound Descriptors</p>
                <p className="text-xs md:ml-2">(Choose 4)</p>
            </div>
            <div className="mt-2">
                <CheckboxGroup value={groupSelected} isDisabled={!is4} isRequired={true} onValueChange={setGroupSelected} name="soundDescriptors" className="flex flex-wrap gap-1" orientation="horizontal">
                ...
                </CheckboxGroup>
                <Button color="primary" isDisabled={!is1} className="w-24 mt-4">Reset</Button>
                <p className="text-xl mt-24 pb-2">Sound Tests</p>
                <div className="grid md:grid-cols-2 lg:grid-cols-3">
                    {foundSwitch.videos.map((video_url: string, index: number) => (
                        <div className="aspect-video h-42 mr-2 mb-2" key={index}>
                            <YoutubeEmbed key={index} videoId={video_url} />
                        </div>
                    ))}
                </div>
            </div>
        </form>
    );
}

Ray

2023-12-26T18:19:10.000Z

move const [isLoading, setLoading] = useState(false) above if (status === "loading")

Answer

@Ray move `const [isLoading, setLoading] = useState(false)` above `if (status === "loading")`

Yellowstripe scadOP

2023-12-26T18:20:18.000Z

that didnt change anything

Im still getting my error

Ray

2023-12-26T18:20:49.000Z

move const [groupSelected, setGroupSelected] = useState<string[]>([]); too

@Ray move `const [groupSelected, setGroupSelected] = useState<string[]>([]);` too

Yellowstripe scadOP

2023-12-26T18:21:40.000Z

still getting the error

Ray

2023-12-26T18:21:56.000Z

move useEffect block too

@Ray move useEffect block too

Yellowstripe scadOP

2023-12-26T18:22:24.000Z

that worked!

Ray

2023-12-26T18:22:49.000Z

also you can make this

if (isLoading || status === 'loading') {
  return <Loading />
}

Yellowstripe scadOP

2023-12-26T18:23:04.000Z

oh ok