React Nativenavigation.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.
navigation.navigate('Detail', { product }) passes params via route. Pitfalls:
1. Object reference vs value: params are implicitly serialized (cloned) inside navigation state. Passing large objects (deep nesting, functions, Date) raises "Non-serializable values were found in the navigation state." Consequences: state cannot persist and dev-tools traces break.
2. Functions in params: never pass a callback onSubmit: (data) => ... via params — serialization fails and the function is not stable across renders. Alternatives:
- Lift state to a context/store and let the next screen read it.
- Use navigation.navigate('Prev', { result: x }) from the next screen.
3. Stale params: if the user navigates to Detail twice with different products, react-navigation caches the screen instance (under native stack), so the component does not remount and useEffect([]) does not rerun. Use useEffect([route.params.id], ...) to fetch when the id changes.
4. Default params: Screen.options does not accept defaults for params — fall back to route.params?.x ?? defaultX inside the component.
5. Deep-link params are strings: every URL param is a string ('42', not 42). Parse when you need a number or boolean.