"Rendered fewer hooks than expected" upon deletion of todo list item

[staltz]

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

What is the current behavior?

Codesandbox: https://codesandbox.io/s/1vy8n91y7 add a few todo items to the list, then press one of the red X buttons to delete one of them.

What is the expected behavior?

The todo item gets deleted.

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

React 16.7.0-alpha.0 using hooks.

---

TL;DR of useProfunctorState hook: underneath it uses useState and useMemo. For each useProfunctorState call, there is only one call of useState. Children components that use promap don't have their own real "setState", instead they all share the setState from the top-level component.

[staltz]

Implementation of useProfunctorState just in case:

class ProfunctorState {
    constructor(state, setState) {
        this.state = state;
        this.setState = setState;
    }

    promap(mapIn, mapOut) {
        const innerSetState = (newInnerStateOrUpdate) => {
            this.setState((prevState) => {
                const innerState = mapIn(prevState);
                const newInnerState = typeof newInnerStateOrUpdate === 'function'
                    ? newInnerStateOrUpdate(innerState)
                    : newInnerStateOrUpdate;
                if (newInnerState === innerState) return prevState;
                return mapOut(newInnerState, prevState);
            });
        };
        const innerState = mapIn(this.state);
        return useMemoizedProfunctorState(innerState, innerSetState);
    }
}

function useMemoizedProfunctorState(state, setState) {
    return useMemo(() => {
        const profunctor = new ProfunctorState(state, setState);
        profunctor.promap = profunctor.promap.bind(profunctor);
        return profunctor;
    }, [JSON.stringify(state)]);
}

function useProfunctorState(initial) {
    const [state, setState] = useState(initial)
    return useMemoizedProfunctorState(state, setState);
}

export default useProfunctorState;

[sebmarkbage]

You're calling useMemoizedProfunctorState inside promap which is a regular function instead of a hook - which against the "rules of hooks".

Our lint rule would've caught that. Although I'm not sure if it would if you renamed promap to usePromap or something.

Ultimately this becomes a problem because you're calling promap in a loop inside of List which is against another rule. Really, this is why the rule about only calling custom hooks inside other custom hooks exists.

[sebmarkbage]

FWIW, it would've worked if you made itemProf a component instead of a function. That way you're calling it in a component instead of in a loop.

[staltz]

Right, so it was multiple calls to useMemo that were causing this. I had my attention on useState, and that one was nicely following the hook rules. A bit quirky, but it indeed works with an <ItemProf> component: https://codesandbox.io/s/mn73v8yr8

[gaearon]

Our lint rule would've caught that. Although I'm not sure if it would if you renamed promap to usePromap or something.

Our lint rule doesn't currently check class methods. Only functions. At the time, there were too many false positives internally in classes. But maybe it's worth being more strict.