Trung BìnhReact Native iconReact Native

Truyền params giữa screens — pitfalls?

navigation.navigate('Detail', { product }) truyền params qua route. Vài pitfall:

1. Object reference vs value: params được serialize ngầm (clone) nội bộ navigation state. Truyền object lớn (nested deep, function, Date) trigger warning "Non-serializable values were found in the navigation state". Hậu quả: state không persist được, dev tools trace bị lỗi.

2. Function trong params: không bao giờ truyền callback onSubmit: (data) => ... qua params — vì serialize fail, và function không stable giữa render. Thay bằng:
- Lift state lên context/store rồi screen sau đọc.
- Dùng navigation.navigate('Prev', { result: x }) từ screen sau quay lại.

3. Stale params: nếu user navigate Detail 2 lần với product khác nhau, react-navigation cache screen instance (theo native stack) → component không remount, useEffect([]) không chạy lại. Phải useEffect([route.params.id], ...) để fetch khi id đổi.

4. Default params: Screen.options không nhận default cho params — phải check route.params?.x ?? defaultX trong component.

5. Deep link params là string: mọi param từ URL là string ('42', không phải 42). Phải parse khi cần number/boolean.

Xem toàn bộ React Native cùng filter theo level & chủ đề con.

Mở danh sách React Native