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

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]

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

[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.