React: Render, State, Effects và mental model hiện đại

React là thư viện để mô tả UI theo state. Component không “chỉnh DOM từng bước”; nó trả về mô tả giao diện cho state hiện tại, React reconcile và commit thay đổi cần thiết.

Component là phép biến đổi từ input sang UI

1
2
3
function Welcome({ name }) {
  return <h1>Hello, {name}</h1>;
}

Props là input từ parent. Giữ render pure: cùng props/state nên tạo cùng output, không gọi API hoặc mutate dữ liệu trong render.

Render root hiện đại

1
2
3
4
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<Welcome name="Hudson" />);

ReactDOM.render thuộc API legacy. React vẫn có lịch sử, nhưng bài mới không cần cosplay năm 2020.

State là snapshot

1
2
3
4
5
6
7
8
9
10
11
import { useState } from 'react';

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

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

State update được queue/batch; biến count trong một render là snapshot. Khi next state phụ thuộc previous state, dùng updater function.

Không mutate object/array state:

1
setUser(current => ({ ...current, name: 'Hudson' }));

Effects dùng để đồng bộ với hệ thống bên ngoài

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { useEffect, useState } from 'react';

function Cats() {
  const [cats, setCats] = useState([]);

  useEffect(() => {
    const controller = new AbortController();

    fetch('/api/cats', { signal: controller.signal })
      .then(response => {
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        return response.json();
      })
      .then(setCats)
      .catch(error => {
        if (error.name !== 'AbortError') console.error(error);
      });

    return () => controller.abort();
  }, []);

  return cats.map(cat => <div key={cat.id}>{cat.name}</div>);
}

Effect không phải chỗ mặc định cho mọi logic. Giá trị có thể tính từ props/state nên tính trong render; event-specific logic nên nằm trong event handler.

Keys và identity

1
items.map(item => <Row key={item.id} item={item} />)

Key giúp React giữ identity giữa các render. Tránh dùng array index khi item có thể reorder/insert/delete, nếu không state component có thể đi theo vị trí thay vì item—một màn hoán đổi danh tính khá khó debug.

State ownership

Đặt state ở component thấp nhất nhưng đủ chung cho những nơi cần nó. Không đưa mọi thứ lên global store. Context và Redux giải quyết coordination, không chữa thói quen không biết data thuộc về ai.

Mental model

  1. Render phải pure.
  2. State là snapshot.
  3. Event handler thay đổi state.
  4. Effect đồng bộ với external system.
  5. Cleanup effect khi subscription/request không còn cần.
  6. Identity nằm ở type, position và key.

Reference