Module 02 — React Core Concepts

Components: Functional vs Class

React component là đơn vị cơ bản nhất — một hàm (hoặc class) nhận props và trả về React elements mô tả UI.

Class Component

Cách viết truyền thống, kế thừa từ React.Component. Có lifecycle methods như componentDidMount, componentDidUpdate, componentWillUnmount.

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }

  componentDidUpdate() {
    document.title = `Count: ${this.state.count}`;
  }

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

Functional Component

Cùng logic, viết bằng function + hooks. Ngắn gọn hơn, dễ đọc hơn, dễ compose hơn.

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Tại sao Functional Components thắng?

• Đơn giản hơn: Không cần this, không cần bind methods, không cần constructor
• Composable: Custom hooks cho phép tái sử dụng logic stateful mà không thay đổi component hierarchy
• Closures thay vì lifecycle: Mỗi render capture đúng giá trị props/state tại thời điểm đó (stale closure là trade-off nhưng đúng về mặt conceptual)
• Dễ test: Là pure function, dễ unit test hơn class với nhiều method
• Tree-shaking tốt hơn: Bundler tối ưu functions tốt hơn classes
• React team all-in: Mọi feature mới (Concurrent, Server Components) đều thiết kế cho functions

Pure Components

Một component "pure" là component luôn trả về cùng output cho cùng input (props + state). React yêu cầu render function phải pure — không side effects trong render phase. Side effects thuộc về useEffect, event handlers, hoặc external systems.

Composition Pattern

React khuyến khích composition thay vì inheritance. Thay vì tạo SpecialButton extends Button, hãy tạo SpecialButton render Button bên trong và truyền props.

function Dialog({ title, children }) {
  return (
    <div className="dialog">
      <h2>{title}</h2>
      <div className="dialog-body">{children}</div>
    </div>
  );
}

function WelcomeDialog() {
  return (
    <Dialog title="Chào mừng">
      <p>Cảm ơn bạn đã ghé thăm!</p>
    </Dialog>
  );
}

JSX: Bản chất là React.createElement()

JSX không phải HTML. JSX là syntax extension cho JavaScript, được Babel/SWC biên dịch thành lời gọi hàm React.createElement().

Khi bạn viết JSX như thế này:

<div className="container">
  <h1>Hello</h1>
  <p>World</p>
</div>

Babel sẽ biên dịch thành:

React.createElement(
  "div",
  { className: "container" },
  React.createElement("h1", null, "Hello"),
  React.createElement("p", null, "World")
);

Kết quả trả về là một plain JavaScript object (React Element):

{
  type: "div",
  props: {
    className: "container",
    children: [
      { type: "h1", props: { children: "Hello" } },
      { type: "p", props: { children: "World" } }
    ]
  }
}

Props: Luồng dữ liệu một chiều

Props là cách component cha truyền dữ liệu xuống component con. Props là immutable — component con không bao giờ được modify props nhận được.

Children Prop

Mọi thứ nằm giữa opening và closing tag trở thành props.children.

function Card({ children, title }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      {children}
    </div>
  );
}

function App() {
  return (
    <Card title="Profile">
      <img src="avatar.png" />
      <p>User info here</p>
    </Card>
  );
}

Render Props Pattern

Truyền function làm prop để component con gọi lại và nhận data.

function MouseTracker({ render }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });

  const handleMove = (e) => {
    setPos({ x: e.clientX, y: e.clientY });
  };

  return <div onMouseMove={handleMove}>{render(pos)}</div>;
}

function App() {
  return (
    <MouseTracker
      render={({ x, y }) => <p>Mouse: {x}, {y}</p>}
    />
  );
}

Prop Drilling Problem

Khi dữ liệu phải "xuyên qua" nhiều tầng component trung gian không cần dùng nó, đó là prop drilling. Giải pháp: Context API, state management libraries, hoặc component composition (đưa component cần data lên gần data source hơn).

function App() {
  const [user, setUser] = useState(null);
  return <Layout user={user} />;
}
function Layout({ user }) {
  return <Sidebar user={user} />;
}
function Sidebar({ user }) {
  return <UserProfile user={user} />;
}

Ở ví dụ trên, Layout và Sidebar không cần user nhưng buộc phải nhận và truyền tiếp. Đây là dấu hiệu cần Context hoặc composition.

State: Batching, Functional Updates, Lazy Init

Batching trong React 18 (Automatic Batching)

Trước React 18, batching chỉ xảy ra trong React event handlers. Từ React 18, mọi state updates đều được batch — kể cả trong setTimeout, Promises, native event handlers.

function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  setName("React");
}

Cả 3 setState chỉ trigger 1 lần re-render duy nhất. React gom tất cả updates lại, tính toán state mới, rồi render một lần.

Nếu bạn cần force flush (hiếm khi cần):

import { flushSync } from "react-dom";

function handleClick() {
  flushSync(() => {
    setCount(c => c + 1);
  });
  flushSync(() => {
    setFlag(f => !f);
  });
}

Functional Updates

Khi state mới phụ thuộc vào state cũ, luôn dùng functional form để tránh stale closure.

setCount(prevCount => prevCount + 1);

setItems(prevItems => [...prevItems, newItem]);

setUser(prevUser => ({ ...prevUser, name: "New Name" }));

Lazy Initialization

Khi initial state tốn tính toán (đọc localStorage, parse JSON...), truyền function thay vì giá trị để chỉ chạy một lần khi mount.

const [data, setData] = useState(() => {
  const saved = localStorage.getItem("data");
  return saved ? JSON.parse(saved) : defaultValue;
});

Nếu viết useState(expensiveComputation()), hàm sẽ chạy mỗi lần render dù giá trị chỉ dùng lần đầu.

Virtual DOM & Reconciliation

Virtual DOM là một lightweight copy của Real DOM dưới dạng JavaScript objects (React Elements tree). Mỗi khi state/props thay đổi, React tạo Virtual DOM mới, so sánh (diff) với cây cũ, rồi chỉ cập nhật những phần thay đổi lên Real DOM.

Thuật toán Diffing — O(n)

So sánh 2 cây tùy ý có complexity O(n³). React giảm xuống O(n) bằng 2 giả định:

• Hai elements khác type → tạo cây mới hoàn toàn (unmount cây cũ, mount cây mới)
• Developer hint qua key prop → React biết element nào ổn định qua các lần render

Quy trình cụ thể:

1. So sánh root elements: nếu khác type (<div> → <span>), destroy toàn bộ subtree cũ
2. Cùng type DOM element: giữ node, chỉ update attributes thay đổi
3. Cùng type Component: giữ instance, update props, trigger re-render
4. Recurse vào children: dùng key để match

Key Prop Mechanism

Khi render list, React cần biết element nào là "cùng một thứ" giữa 2 lần render.

const items = ["A", "B", "C"];

<ul>
  {items.map(item => (
    <li key={item}>{item}</li>
  ))}
</ul>

Fiber Architecture

Vấn đề với Stack Reconciler (React < 16)

Stack Reconciler cũ hoạt động đồng bộ, đệ quy. Khi cây component lớn, quá trình reconciliation block main thread → UI đơ, animation giật, input không phản hồi. Không có cách nào để pause, abort, hoặc ưu tiên công việc.

Fiber là gì?

Fiber là kiến trúc mới của React (từ v16), trong đó mỗi component/element được biểu diễn bằng một Fiber node — một JavaScript object chứa thông tin về component, state, props, và các pointer đến parent/child/sibling.

{
  type: Function | String | Symbol,
  key: null | String,
  stateNode: DOM node | Component instance,
  child: Fiber | null,
  sibling: Fiber | null,
  return: Fiber | null,
  pendingProps: Object,
  memoizedState: Object,
  effectTag: Number,
  lanes: Number
}

Unit of Work & Incremental Rendering

Thay vì xử lý toàn bộ cây một lượt (stack), Fiber chia công việc thành units of work. React xử lý từng fiber node một, sau mỗi unit có thể:

• Pause: nhường main thread cho browser (paint, input handling)
• Resume: tiếp tục từ nơi dừng
• Abort: bỏ work đang làm nếu có update mới quan trọng hơn
• Reuse: tái sử dụng kết quả đã tính

Two Phases

Priority Lanes

React 18 dùng hệ thống "Lanes" để phân loại priority của updates:

• SyncLane: Cao nhất — discrete user events (click, keypress)
• InputContinuousLane: Continuous events (drag, scroll)
• DefaultLane: Normal priority (network responses)
• TransitionLane: Low priority — transitions (useTransition)
• IdleLane: Thấp nhất — offscreen, deferred work

Lanes cho phép React xử lý high-priority updates trước mà không bị block bởi low-priority work đang chạy.

React 18 Concurrent Features

useTransition

Đánh dấu state update là "non-urgent" — React sẽ giữ UI cũ hiển thị trong khi tính toán UI mới ở background. Nếu có user input mới, React abort transition đang chạy và xử lý input trước.

function SearchResults() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  function handleChange(e) {
    setQuery(e.target.value);

    startTransition(() => {
      setResults(filterHugeList(e.target.value));
    });
  }

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <span>Đang tải...</span>}
      <ResultList data={results} />
    </div>
  );
}

isPending là boolean cho biết transition đang chạy, dùng để hiện loading indicator.

useDeferredValue

Tương tự useTransition nhưng dùng cho giá trị thay vì hành động. React sẽ trì hoãn việc re-render với giá trị mới và hiển thị giá trị cũ trước.

function SearchPage({ query }) {
  const deferredQuery = useDeferredValue(query);
  const isStale = query !== deferredQuery;

  return (
    <div style={{ opacity: isStale ? 0.5 : 1 }}>
      <HeavyResultList query={deferredQuery} />
    </div>
  );
}

Suspense

Suspense cho phép component "chờ" một thứ gì đó (data fetching, lazy loading) và hiển thị fallback trong lúc chờ.

const LazyComponent = React.lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <Suspense fallback={<div>Đang tải...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

Error Boundaries

Error Boundaries là React components bắt JavaScript errors trong child component tree, log lỗi, và hiển thị fallback UI thay vì crash toàn bộ app.

Chỉ viết được bằng Class Component — React chưa cung cấp hook equivalent.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    logErrorToService(error, errorInfo.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || <h2>Đã xảy ra lỗi.</h2>;
    }
    return this.props.children;
  }
}

Sử dụng:

<ErrorBoundary fallback={<p>Lỗi rồi!</p>}>
  <UserProfile />
</ErrorBoundary>

HOC → Render Props → Custom Hooks: Quá trình tiến hóa

Higher-Order Components (HOC)

Function nhận component, trả về component mới với logic bổ sung. Pattern phổ biến thời class components.

function withAuth(WrappedComponent) {
  return function AuthenticatedComponent(props) {
    const isLoggedIn = useAuth();
    if (!isLoggedIn) return <LoginScreen />;
    return <WrappedComponent {...props} />;
  };
}

const ProtectedDashboard = withAuth(Dashboard);

Vấn đề: Wrapper hell (nhiều HOC lồng nhau), khó trace props origin, naming collisions, static methods bị mất.

Render Props

Truyền function làm prop (hoặc children) để share logic. Giải quyết vấn đề transparency của HOC.

function AuthGuard({ children }) {
  const isLoggedIn = useAuth();
  if (!isLoggedIn) return <LoginScreen />;
  return children;
}

Vấn đề: Vẫn tạo nesting sâu (callback hell trong JSX), khó đọc với nhiều render props.

Custom Hooks (Giải pháp hiện đại)

Extract logic stateful thành function bắt đầu bằng use. Không thay đổi component tree, không wrapper, hoàn toàn composable.

function useAuth() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    checkAuthStatus().then(u => {
      setUser(u);
      setLoading(false);
    });
  }, []);

  return { user, loading, isLoggedIn: !!user };
}

function Dashboard() {
  const { user, loading, isLoggedIn } = useAuth();

  if (loading) return <Spinner />;
  if (!isLoggedIn) return <LoginScreen />;
  return <DashboardContent user={user} />;
}

Tại sao hooks thắng: Flat code (không nesting), explicit data flow, composable (gọi nhiều hooks tuần tự), dễ test từng hook riêng biệt.

React.memo: Tối ưu re-rendering

React.memo là Higher-Order Component wrap functional component. Nó thực hiện shallow comparison trên props — nếu props không đổi, skip re-render.

const ExpensiveList = React.memo(function ExpensiveList({ items, onSelect }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id} onClick={() => onSelect(item.id)}>
          {item.name}
        </li>
      ))}
    </ul>
  );
});

Custom Comparator

Tham số thứ 2 là function so sánh tùy chỉnh. Return true = props giống nhau (skip render), false = props khác (re-render).

const MemoizedItem = React.memo(
  function Item({ data, config }) {
    return <div>{data.name} - {config.theme}</div>;
  },
  function arePropsEqual(prevProps, nextProps) {
    return (
      prevProps.data.id === nextProps.data.id &&
      prevProps.config.theme === nextProps.config.theme
    );
  }
);