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!

Why We Cannot Call React Hooks Conditionally. was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

​ Level Up Coding – Medium

about Infinite Loop Digital

We support businesses by identifying requirements and helping clients integrate AI seamlessly into their operations.

Gartner
Gartner Digital Workplace Summit Generative Al

GenAI sessions:

  • 4 Use Cases for Generative AI and ChatGPT in the Digital Workplace
  • How the Power of Generative AI Will Transform Knowledge Management
  • The Perils and Promises of Microsoft 365 Copilot
  • How to Be the Generative AI Champion Your CIO and Organization Need
  • How to Shift Organizational Culture Today to Embrace Generative AI Tomorrow
  • Mitigate the Risks of Generative AI by Enhancing Your Information Governance
  • Cultivate Essential Skills for Collaborating With Artificial Intelligence
  • Ask the Expert: Microsoft 365 Copilot
  • Generative AI Across Digital Workplace Markets
10 – 11 June 2024

London, U.K.