Why We Cannot Call React Hooks Conditionally.
Let’s start this blog topic with a code example. Take a look at the code above; everything looks good. We have defined three states, and we can use those variables in our render logic.
But have you ever been curious about what will happen if we define a state using the useState hook within a condition? Like in the example below.
In the above code, we use the same example as before, but we define a variable and toggle it with a useEffect hook. Then, we conditionally render the B variable, as shown in the example above.
The above code looks fine, but it isn’t working as expected, as it gives an error: “Cannot read properties of undefined (reading ‘length’).” We haven’t used the length method anywhere in our code, yet it throws that error. Why is that?
The Reason
The reason behind this error lies in how React stores hooks behind the scenes. It uses a data structure called a singly linked list.
Let’s keep the blog concise and engaging. We’ll just scratch the surface and take a look at what this data structure looks like.
Simple Introduction To Single Link List
Imagine a train with interconnected compartments. Each compartment carries a piece of information, and it’s connected to the next compartment in line by a hook. This is a simplified analogy of a singly linked list.
A singly linked list is a linear data structure where elements, called nodes, are arranged in a specific order. Unlike arrays, the nodes are not stored in contiguous memory locations. Each node contains two parts: data and a reference (or pointer) to the next node in the sequence. This pointer allows you to traverse the list, moving from one node to the next to access the data.
The catch is that each node contains a reference to another node, but you can’t trace back a node. This means that if we have three nodes A, B, and C, node A contains the address of node B, and node B contains the address of node C. However, if we pick node B, then we cannot find the address of node A from it.
Back To Our Main Example
In the example where we conditionally define states, the reason why React gives an error is because React does not allow conditional definition of hooks.
The reason is simple: as we’ve already learned, React saves hooks during the first render in a singly linked list data structure. Now, when we use a useEffect to change the boolean to false and the component re-renders, everything crashes.
Why? Because we have State A, and that state has a reference to B. But now, we do not have B (it was present in the first render, but in the second render, that condition is false), so we cannot get to C because B has the address of C.
Just imagine every hook as a node of a linked list. So, if any node disappears in between renders, everything will crash. In order to prevent that from happening, React gives us this simple rule.
“We cannot call hooks conditionally” because React relies on the order in which hooks are called.
Conclusion
This blog aimed to explain an essential concept in React, and I hope I’ve managed to do that to some extent. It’s a crucial question in interviews, and grasping it well can give you a big advantage. For further learning, check out the Official React documentation.
If you found this content valuable, I’d love to connect with you! Feel free to follow me on LinkedIn for more updates, connect with me on GitHub to explore my projects, and find me on Medium for regular insights. Your support means a lot — consider buying me a coffee on Buy Me a Coffee to help fuel more content creation. Looking forward to connecting with you!
