Fiber node là một đối tượng trong bộ nhớ của React, nó đại diện cho một đơn vị công việc (unit of work) tương ứng với một React element trong cây component.
Hay nói cách khác, mỗi component, dom element, mỗi hook trong React đều có một fiber node tương ứng trong bộ nhớ, để React có thể theo dõi, tạm dừng, tiếp tục hoặc huỷ render cho từng phần của UI.
React Element -> Fiber Node -> DOM Node
Cấu trúc của một Fiber node
Mỗi fiber node là một object phức tạp, chứa nhiều thông tin mà React dùng để điều phối rendering, nó có thể giản lược như sau.
{
type: MyComponent, // Function hoặc Class component
key: null, // Key của element (nếu có)
stateNode: instance, // Trỏ đến instance thật (VD: DOM node hoặc class instance)
child: childFiber, // Con đầu tiên trong cây
sibling: siblingFiber, // Node kế tiếp cùng cấp
return: parentFiber, // Node cha
pendingProps: {}, // Props mới nhận
memoizedProps: {}, // Props cũ (đã render lần trước)
memoizedState: {}, // State cũ (đã render lần trước)
updateQueue: {}, // Queue chứa các cập nhật state
effectTag: Update, // Loại hiệu ứng cần làm (VD: thêm/sửa/xóa DOM)
alternate: oldFiber, // Liên kết với fiber ở lần render trước
}