build() vs render()

ใน React component function (หรือ render() ใน class components) ถูกเรียกทุกครั้งที่ state หรือ props เปลี่ยน function นั้นต้องเป็น pure function: ถ้า state และ props เหมือนกัน ก็ต้อง return JSX เหมือนกัน โดยไม่มี side effects ใน body

build() method ของ Flutter ปฏิบัติตาม contract เดียวกันทุกประการ framework เรียก build() ทุกครั้งที่ rebuild ถูก trigger โดย setState, parent rebuild, หรือการเปลี่ยนแปลง InheritedWidget และ build() ต้อง pure และราคาถูก: ห้าม network calls, ห้าม Future.wait, ห้าม computation หนัก — เป็นแค่การบรรยาย UI

กฎจริงของทั้งสอง framework นั้นเหมือนกัน: describe, don’t do (บรรยาย อย่าทำ)

การเปรียบเทียบแบบ side-by-side

// React — component function คือ "render"
function UserCard({ userId }) {
  const [user, setUser] = useState(null);

  // Side effects ไปอยู่ใน useEffect ไม่ใช่ใน render body
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);

  // render body: pure description เท่านั้น
  if (!user) return <p>Loading...</p>;
  return (
    <div className="card">
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

class UserCard extends StatefulWidget {
  final String userId;
  const UserCard({super.key, required this.userId});

  @override
  State<UserCard> createState() => _UserCardState();
}

class _UserCardState extends State<UserCard> {
  User? _user;

  // Side effects ไปอยู่ใน initState / didUpdateWidget ไม่ใช่ใน build()
  @override
  void initState() {
    super.initState();
    _loadUser();
  }

  Future<void> _loadUser() async {
    final u = await fetchUser(widget.userId);
    if (mounted) setState(() => _user = u);
  }

  // build(): pure description เท่านั้น
  @override
  Widget build(BuildContext context) {
    if (_user == null) return const CircularProgressIndicator();
    return Card(
      child: Column(children: [
        Text(_user!.name,
            style: const TextStyle(fontWeight: FontWeight.bold)),
        Text(_user!.email),
      ]),
    );
  }
}

🔀 React render body → Flutter build()

Purity contract เหมือนกัน ทั้งคู่ต้องปราศจาก side effects อย่าเรียก setState ใน build() — จะเกิด infinite rebuild loop อย่าเริ่ม network request ใน build()
build() อาจถูกเรียกบ่อยมาก Flutter อาจเรียก build() หลายสิบครั้งต่อวินาทีระหว่าง animations งานหนัก (parsing, sorting, allocation หนัก) ต้องย้ายไปที่ initState, didUpdateWidget, หรือ compute isolate แยก
const widgets ข้ามการเรียกทั้งหมด ถ้า sub-widget เป็น const Flutter ใช้ instance ที่ cache ไว้และไม่เรียก build() อีก — เป็น optimization ที่แข็งแกร่งกว่า React.memo เพราะทำงานที่ระดับภาษาโดยไม่ต้องเขียน boilerplate
mounted guard สำหรับ async หลัง await ใน State method widget อาจถูก dispose ไปแล้ว ตรวจ if (mounted) เสมอก่อนเรียก setState ใน async code เทียบเท่า React: cleanup functions ใน useEffect (cancel fetch หรือ ignore result ถ้า component unmounted)
widget.X เพื่ออ่าน config ใน State ใน State class configuration ของ widget ปัจจุบันเข้าถึงได้ผ่าน property widget (เช่น widget.userId) เทียบเท่า React: argument props หรือ this.props ใน class components

ตัวอย่างที่รันได้

Flutter / DartOpen in DartPad ↗ (copies code)

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal)),
      home: const Scaffold(body: Center(child: RebuildDemo())),
    );
  }
}

// This widget counts how many times build() is called —
// demonstrating that build() is cheap and runs frequently.
class RebuildDemo extends StatefulWidget {
  const RebuildDemo({super.key});

  @override
  State<RebuildDemo> createState() => _RebuildDemoState();
}

class _RebuildDemoState extends State<RebuildDemo> {
  int _counter = 0;
  int _buildCount = 0; // incremented inside build to show frequency

  @override
  Widget build(BuildContext context) {
    // Tracking rebuild count — this is the ONLY acceptable "side effect"
    // in build(): a synchronous field increment for demo purposes.
    _buildCount++;

    return Padding(
      padding: const EdgeInsets.all(24),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('Counter: $_counter',
              style: const TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
          const SizedBox(height: 8),
          Text('build() called: $_buildCount times',
              style: const TextStyle(color: Colors.grey)),
          const SizedBox(height: 24),
          ElevatedButton(
            onPressed: () => setState(() => _counter++),
            child: const Text('Increment (triggers rebuild)'),
          ),
        ],
      ),
    );
  }
}