React NativeStyleSheet.create({ ... }) validate keys lúc dev (warn nếu sai tên prop, vd colour), freeze object trả về để giữ reference ổn định giữa các render. Lịch sử (RN <0.59) còn thay object bằng integer id để tối ưu bridge — tối ưu này đã bị bỏ trong RN hiện đại nên đừng nhớ nhầm.
Inline style style={{ padding: 10, color: 'red' }} tạo object mới mỗi render → nếu prop này truyền vào React.memo child, shallow compare fail → child re-render thừa.
Khi nào dùng cái nào:
- StyleSheet.create cho style cố định, ưu tiên mặc định. Lợi ích thực tế 2026: dev-time validation, reference stability, ý đồ rõ ràng cho người đọc.
- Inline cho style động phụ thuộc props/state: style={{ opacity: pressed ? 0.5 : 1 }}. Pattern chuẩn: gộp vào array để giữ phần tĩnh trong StyleSheet — style={[styles.btn, pressed && styles.btnPressed]}.
Với Fabric (New Arch) việc commit style hoàn toàn không qua bridge nên performance giữa hai cách gần như tương đương — chọn StyleSheet.create chủ yếu vì readability và lint, không vì runtime perf.
StyleSheet.create({ ... }) validates keys at dev time (warns on typos like colour) and freezes the returned object so the reference stays stable across renders. Historically (RN <0.59) it also replaced the object with an integer id to optimise the bridge — that optimisation has been removed from modern RN, so do not cite it as a benefit today.
Inline style style={{ padding: 10, color: 'red' }} creates a new object every render — when passed to a React.memo child, shallow compare fails and the child re-renders unnecessarily.
When to use which:
- StyleSheet.create for fixed styles — the default. Real 2026 benefits: dev-time validation, reference stability, clearer intent for readers.
- Inline for dynamic styles dependent on props/state: style={{ opacity: pressed ? 0.5 : 1 }}. Standard pattern: combine via array to keep the static part in StyleSheet — style={[styles.btn, pressed && styles.btnPressed]}.
Under Fabric (New Architecture) styles commit without going through the bridge, so the runtime gap between the two approaches is essentially zero — pick StyleSheet.create for readability and lint, not runtime perf.