React hooks — “Rendered more hooks than during the previous render”
Lately, I’ve been building a React hooks-based forms API and writing about it, and I’m expanding on a few different use cases now. One use case that I started building out was dynamic forms. The kind where you display a form to an end user and the user needs more or fewer form fields. Say the end-user decides to click a button on a form which then adds additional form fields.
In my forms API, I have 2 hooks. One called useForm and one called useInput. useForm manages overall form details, and useInput manages the state of individual inputs. useForm provides an API to add inputs called api.addInput. Each call to api.addInput uses the useInput hook. The solution works well when creating a form with a known size that isn’t subject to change over time. But if I want my forms library to support the ability to dynamically increase or decrease the size of a form, my solution would eventually need to increase the number of rendered hooks across render cycles.
Well, React ain’t gonna let that happen. I was aware that React requires hooks to be called in the same order with every render. The documentation clearly outlines this. But I didn’t stop to think about the use case of increasing the number of hooks across different render cycles, even if the original set of hooks are in the same consistent order. To…
