CODEWITHSUNDEEP
reactjsreact-hooks
Gambit2007
Gambit2007

Reputation: 4004

React - getting "Rendered more hooks than during the previous render" error

I have the following component:

const [eventCounter, setEventCounter] = useState(0)

let subsectionRefs = data ? Object.values(data).reduce((acc, event) => {
    acc[event.id] = useRef();
    return acc;
}, {}) : {};

    const setRankChangeFocus = eventID => {
    setEventCounter(eventCounter + 1);
    window.scrollTo(0, subsectionRefs[eventID].current.offsetTop);
};

return (
                    <Comp
                        key={event.id}
                        onRankChange={(value) => {
                            setRankChangeFocus(value);
                        }}
                    />

)

Essentially, i want subsectionRefs to re-initalize itself every time setRankChangeFocus(value) is called from the child component Comp.

However, i'm getting the "Rendered more hooks than during the previous render" error when i load the page - why? What am i doing wrong?

Upvotes: 0

Views: 8760

Answers (2)

Sean H
Sean H

Reputation: 11

You're calling your setEventCounter function from within setRankChangeFocus, which is neither a custom hook nor a proper React function component. See the Rules of Hooks.

Upvotes: 1

Dennis Vash
Dennis Vash

Reputation: 53984

You can't use hooks in conditions like you doing with useRef.

Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.

Upvotes: 0

Related Questions