Why React is used - Why It Works This Way

Overview - Why React is used

What is it?

React is a tool that helps build user interfaces for websites and apps. It lets developers create parts of a page called components that can be reused and updated easily. React makes it simple to show changes on the screen without reloading the whole page. It uses a special way to keep track of what needs to change, making apps fast and smooth.

Why it matters

Before React, building interactive websites was slow and complicated because every change meant reloading or rewriting large parts of the page. React solves this by updating only what needs to change, saving time and making apps feel faster. Without React, developers would spend more time fixing bugs and less time creating great experiences, and users would face slower, clunkier websites.

Where it fits

Learners should first understand basic HTML, CSS, and JavaScript to follow React easily. After React, they can learn about state management tools, routing libraries, and backend integration to build full applications. React fits in the journey as a modern way to build dynamic user interfaces efficiently.

Mental Model

Core Idea

React lets you build user interfaces by breaking them into small, reusable pieces that update efficiently when data changes.

Think of it like...

React is like building with LEGO blocks: each block is a component you can reuse and rearrange, and when you want to change something, you only swap out the blocks that need updating instead of rebuilding the whole model.

User Interface
┌─────────────────────────────┐
│          React App          │
│  ┌───────────────┐          │
│  │ Component A   │          │
│  ├───────────────┤          │
│  │ Component B   │          │
│  └───────────────┘          │
│                             │
│  React updates only changed  │
│  components efficiently      │
└─────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

What is a React Component

Concept: React components are the building blocks of a React app, representing parts of the user interface.

A React component is a function that returns HTML-like code called JSX. This code describes what the UI should look like. Components can be simple, like a button, or complex, like a whole form.

Result

You can create reusable pieces of UI that can be combined to build a full app.

Understanding components is key because React apps are built by combining many small, manageable pieces.

2

Foundation

JSX: Writing UI in JavaScript

Concept: JSX lets you write HTML-like code inside JavaScript, making UI code easier to read and write.

Instead of writing HTML and JavaScript separately, JSX lets you mix them. For example, can be written inside a JavaScript function. React then turns this into real HTML on the page.

Result

UI code becomes more intuitive and easier to maintain.

JSX bridges the gap between design and logic, making UI development smoother.

3

Intermediate

State: Making UI Interactive

🤔Before reading on: do you think UI updates automatically when data changes, or do you have to refresh manually? Commit to your answer.

Concept: State is a way to store data inside a component that can change over time and cause the UI to update.

React components can hold state using hooks like useState. When state changes, React automatically updates the parts of the UI that depend on that state, without reloading the whole page.

Result

The UI responds instantly to user actions or data changes.

Knowing how state works explains why React apps feel fast and responsive.

4

Intermediate

Virtual DOM: Efficient Updates

🤔Before reading on: do you think React updates the real webpage directly every time, or does it use a special method? Commit to your answer.

Concept: React uses a virtual copy of the webpage called the Virtual DOM to figure out what changed before updating the real page.

When state changes, React creates a new Virtual DOM tree and compares it to the old one. It finds the differences and updates only those parts on the real page, saving time and resources.

Result

Websites built with React update quickly and smoothly.

Understanding the Virtual DOM reveals why React is faster than older methods.

5

Intermediate

Props: Passing Data Between Components

Concept: Props are how components receive data from their parent components to customize their behavior or appearance.

A parent component can send information to a child component using props. This lets components stay reusable and flexible because they can show different data depending on what props they get.

Result

Components can be reused in many places with different data.

Props enable building complex UIs by connecting simple components.

6

Advanced

React Hooks: Managing Logic Cleanly

🤔Before reading on: do you think React components can only use state and effects in class-based code, or also in functions? Commit to your answer.

Concept: Hooks let function components use features like state and lifecycle events without writing classes.

Hooks like useState and useEffect let you add state and side effects inside function components. This makes code simpler and easier to understand compared to older class-based components.

Result

Developers write cleaner, more maintainable React code.

Hooks changed React development by making components simpler and more powerful.

7

Expert

React Reconciliation and Fiber Architecture

🤔Before reading on: do you think React updates the UI all at once or breaks it into smaller parts? Commit to your answer.

Concept: React uses a process called reconciliation with a system called Fiber to update the UI in small chunks for better performance and responsiveness.

Fiber breaks UI updates into units of work that can be paused and resumed. This lets React keep the app responsive even during big updates by spreading work over multiple frames.

Result

React apps stay smooth and responsive even with complex UI changes.

Knowing Fiber explains how React balances speed and user experience under the hood.

Under the Hood

React creates a Virtual DOM, a lightweight copy of the real DOM, to track changes. When data changes, React compares the new Virtual DOM with the previous one (a process called diffing). It calculates the minimal set of changes needed and applies them to the real DOM efficiently. React's Fiber architecture schedules these updates in small chunks, allowing the browser to remain responsive during complex updates.

Why designed this way?

React was designed to solve slow and complex UI updates in traditional web apps. Directly manipulating the real DOM is slow and error-prone. By using a Virtual DOM and diffing, React minimizes costly updates. Fiber was introduced to improve responsiveness by breaking updates into interruptible units, addressing limitations of earlier synchronous rendering.

React Update Flow
┌───────────────┐
│  State Change │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ New Virtual   │
│ DOM Created   │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Diffing Old   │
│ vs New Virtual│
│ DOM           │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Fiber Schedules│
│ Updates in    │
│ Small Chunks  │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Real DOM      │
│ Updated       │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does React automatically update the entire webpage every time data changes? Commit to yes or no.

Common Belief: React updates the whole webpage whenever something changes.

Reality: React only updates the parts of the page that actually changed by comparing Virtual DOM versions.

Why it matters: Believing React reloads everything leads to inefficient coding and misunderstanding React's performance benefits.

Quick: Do you think React requires learning a completely new language? Commit to yes or no.

Common Belief: React uses a new programming language different from JavaScript.

Reality: React uses JavaScript with JSX, which looks like HTML but is just JavaScript syntax sugar.

Why it matters: Thinking React is a new language can intimidate beginners unnecessarily and slow down learning.

Quick: Do you think React components must be classes? Commit to yes or no.

Common Belief: React components have to be written as classes to use state and lifecycle features.

Reality: Function components with hooks can do everything class components can, and are now the preferred way.

Why it matters: Sticking to class components leads to more complex and harder-to-maintain code.

Quick: Is React only useful for small projects? Commit to yes or no.

Common Belief: React is only good for simple or small websites.

Reality: React scales well and is used by large companies for complex, high-traffic applications.

Why it matters: Underestimating React's scalability can limit career opportunities and project choices.

Expert Zone

1

React's reconciliation algorithm prioritizes user interactions by interrupting less important updates, improving perceived performance.

2

Hooks must be called in the same order on every render to keep React's internal state consistent, a subtle rule often overlooked.

3

React's batching of state updates can cause unexpected behavior if not understood, especially with asynchronous code.

When NOT to use

React is not ideal for static websites where no interactivity is needed; simpler static site generators or server-rendered pages may be better. Also, for very small projects, plain JavaScript or simpler libraries might be more efficient. Alternatives like Vue or Svelte may be preferred depending on team skills and project requirements.

Production Patterns

In production, React apps often use component libraries for consistent UI, state management tools like Redux or Zustand for complex data flows, and server-side rendering or static generation for faster load times and SEO. Code splitting and lazy loading are common to improve performance.

Connections

Component-Based Architecture

React builds on the idea of breaking software into reusable components.

Understanding component-based design in software engineering helps grasp why React structures UI as small, independent pieces.

Functional Programming

React's use of pure functions and hooks reflects functional programming principles.

Knowing functional programming concepts clarifies why React favors immutable data and side-effect management.

Human Brain's Modular Processing

React's component model is similar to how the brain processes information in modules.

Recognizing this connection helps appreciate React's design for managing complexity by isolating concerns.

Common Pitfalls

#1 Trying to update the UI by directly changing the DOM instead of using React's state.

Wrong approach:

document.getElementById('count').innerText = newCount;

Correct approach:

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

Root cause:

Misunderstanding that React controls the DOM and direct changes can cause inconsistencies.

#2 Calling hooks conditionally inside components.

Wrong approach:

if (someCondition) {
useState(0);
}

Correct approach:

const [state, setState] = useState(0);
if (someCondition) {
// use state normally
}

Root cause:

Not knowing hooks must be called in the same order every render to keep React's state consistent.

#3 Passing props incorrectly causing unnecessary re-renders.

Wrong approach:

Correct approach:

const data = { name: 'John' };

Root cause:

Creating new objects inline causes React to think props changed every render, triggering extra updates.

Key Takeaways

React helps build fast, interactive user interfaces by breaking UI into reusable components.

It uses a Virtual DOM to update only what changes, making apps efficient and smooth.

JSX lets you write UI code that mixes HTML-like syntax with JavaScript logic.

Hooks allow function components to manage state and side effects cleanly without classes.

React's Fiber architecture schedules updates in small chunks to keep apps responsive.