DEV Community

ak0047
ak0047

Posted on

Why React Feels So Confusing: My Observations

#programming #beginners #react #frontend

Introduction

I’ve worked with various programming languages and frameworks, both professionally and through self-study.

Usually, after reading a basic book or going through a tutorial, I can get the hang of things by looking up details online as needed.

However, React didn’t fit into my usual approach at all.

Even after building a few React apps, I often found myself unsure where to write code when I wanted to make small changes to existing functionality.

This made me wonder: why is React so hard to grasp?

In this article, I’ll share my thoughts. I hope it can help people who are just starting with React, or those struggling with it, find a clearer way to understand it.

Reason 1: Multiple Layers of Processing

Let’s look at a simple example:

const [count, setCount] = useState(0);

return (
  <button onClick={() => setCount(count + 1)}>
    {count}
  </button>
);
Enter fullscreen mode Exit fullscreen mode

This code increases a number when the button is clicked.
However, the actual process behind the scenes is more complex than it seems.

Here’s what happens step by step:

  1. The JS/TS code written by the developer calls React’s API (updates the state).
  2. React determines whether re-rendering is necessary.
  3. React updates the virtual DOM.
  4. The browser updates the actual DOM based on React’s instructions.

In other words:

  • Developer-written JS/TS code
  • React’s internal processing
  • Browser rendering

…all happen at different layers. This separation makes it hard to intuitively understand which code runs at which layer, which I think is one reason why React feels confusing.

Reason 2: Triggers for Code Execution Are Hard to Identify

In React, code can be triggered by multiple events:

  • When a button is clicked (event)
  • When state changes
  • When props change

For example:

useEffect(() => {
  console.log("updated");
}, [count]);
Enter fullscreen mode Exit fullscreen mode

This code:

  • Doesn’t explicitly call a function
  • Doesn’t involve a direct button click

…but still runs whenever count changes.

This makes it difficult to intuitively understand from the code itself when and why a piece of code will execute, which adds to React’s learning curve.

Reason 3: Display Elements and Logic Are Mixed

In React, JSX mixes the elements displayed in the browser with the logic controlling them:

return (
  <div>
    {count > 0 && <p>{count}</p>}
  </div>
);
Enter fullscreen mode Exit fullscreen mode

While it looks similar to HTML:

  • Conditional expressions
  • Variable evaluation
  • Display logic

…are all included.

This mixing makes it hard to immediately tell which elements will appear under which conditions, contributing to React’s complexity.

Summary

React feels confusing because of:

  • Multiple layers of processing
  • Triggers that are not obvious from the code
  • Blurred boundaries between display elements and logic

These factors combine to create a sense of “I don’t know what’s happening, when, or where”.
On top of this, the variety of JS/TS syntax and styling approaches only adds to the difficulty.

I’m still learning, but being aware of these points helps me approach React more consciously.

💬 How about you?

  • What aspects of React did you find most confusing when you started?
  • How do you usually keep track of different layers (state, React processing, DOM updates)?
  • Do you have any tips for making React code easier to reason about?

Top comments (0)