Don't call a React function component
Photo by Alexander Andrews
The difference between React.createElement and calling a function component directly
Watch "Fix 'React Error: Rendered fewer hooks than expected'" on egghead.io
I got a great question from Taranveer Bains on my AMA asking:
I ran into an issue where if I provided a function that used hooks in its implementation and returned some JSX to the callback for
Array.prototype.map
. The error I received wasReact Error: Rendered fewer hooks than expected
.
Here's a simple reproduction of that error
1import * as React from 'react'23function Counter() {4 const [count, setCount] = React.useState(0)5 const increment = () => setCount(c => c + 1)6 return <button onClick={increment}>{count}</button>7}89function App() {10 const [items, setItems] = React.useState([])11 const addItem = () => setItems(i => [...i, {id: i.length}])12 return (13 <div>14 <button onClick={addItem}>Add Item</button>15 <div>{items.map(Counter)}</div>16 </div>17 )18}
And here's how that behaves when rendered (with an error boundary around it so we don't crash this page):
In the console, there are more details in a message like this:
1Warning: React has detected a change in the order of Hooks2called by BadCounterList. This will lead to bugs and3errors if not fixed. For more information, read the4Rules of Hooks: https://fb.me/rules-of-hooks56 Previous render Next render7 ------------------------------------------------------81. useState useState92. undefined useState10 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
So what's going on here? Let's dig in.
First off, I'll just tell you the solution:
1- <div>{items.map(Counter)}</div>2+ <div>{items.map(i => <Counter key={i.id} />)}</div>
Before you start thinking it has to do with the
key
prop, let me just tell you it doesn't. But the key prop is important in general and you can learn about that from my other blog post: Understanding React's key prop
Here's another way to make this same kind of error happen:
1function Example() {2 const [count, setCount] = React.useState(0)3 let otherState4 if (count > 0) {5 React.useEffect(() => {6 console.log('count', count)7 })8 }9 const increment = () => setCount(c => c + 1)10 return <button onClick={increment}>{count}</button>11}
The point is that our Example
component is calling a hook conditionally, this
goes against the rules of hooks and
is the reason the
eslint-plugin-react-hooks
package has a rules-of-hooks
rule. You can read more about this limitation
from the React docs,
but suffice it to say, you need to make sure that the hooks are always called
the same number of times for a given component.
Ok, but in our first example, we aren't calling hooks conditionally right? So why is this causing a problem for us in this case?
Well, let's rewrite our original example slightly:
1function Counter() {2 const [count, setCount] = React.useState(0)3 const increment = () => setCount(c => c + 1)4 return <button onClick={increment}>{count}</button>5}67function App() {8 const [items, setItems] = React.useState([])9 const addItem = () => setItems(i => [...i, {id: i.length}])10 return (11 <div>12 <button onClick={addItem}>Add Item</button>13 <div>14 {items.map(() => {15 return Counter()16 })}17 </div>18 </div>19 )20}
And you'll notice that we're making a function that's just calling another function so let's inline that:
1function App() {2 const [items, setItems] = React.useState([])3 const addItem = () => setItems(i => [...i, {id: i.length}])4 return (5 <div>6 <button onClick={addItem}>Add Item</button>7 <div>8 {items.map(() => {9 const [count, setCount] = React.useState(0)10 const increment = () => setCount(c => c + 1)11 return <button onClick={increment}>{count}</button>12 })}13 </div>14 </div>15 )16}
Starting to look problematic? You'll notice that we haven't actually changed any behavior. This is just a refactor. But do you notice the problem now? Let me repeat what I said earlier: you need to make sure that the hooks are always called the same number of times for a given component.
Based on our refactor, we've come to realize that the "given component" for all
our useState
calls is not the App
and Counter
, but the App
alone. This
is due to the way we're calling our Counter
function component. It's not a
component at all, but a function. React doesn't know the difference between us
calling a function in our JSX and inlining it. So it cannot associate anything
to the Counter
function, because it's not being rendered like a component.
This is why you need to use JSX (or React.createElement
)
when rendering components rather than simply calling the function. That way, any
hooks that are used can be registered with the instance of the component that
React creates.
So don't call function components. Render them.
Oh, and it's notable to mention that sometimes it will "work" to call function components. Like so:
1function Counter() {2 const [count, setCount] = React.useState(0)3 const increment = () => setCount(c => c + 1)4 return <button onClick={increment}>{count}</button>5}67function App() {8 return (9 <div>10 <div>Here is a counter:</div>11 {Counter()}12 </div>13 )14}
But the hooks that are in Counter
will be associated with the App
component
instance, because there is no Counter
component instance. So it will "work,"
but not the way you'd expect and it could behave in unexpected ways as you make
changes. So just render it normally.
Good luck!
You can play around with this in codesandbox: