I am taking an online course on react-native
and I am curious about a parameter passing practice used by the instructor.
The instructor has an array DATA
of content each element of which is an instance of SomeModel
class. When navigating from AScreen
to BScreen
, he passes the id of a valid SomeModel
object as a parameter BScreen
by providing it as a parameter to props.navigation.navigate()
method. Then, he imports the the same DATA
array in the file defining BScreen
, and uses find()
method on the DATA
to retrieve the relevant object. (i.e., using the ID it obtained through props.navigation.getParam()
method)
As AScreen
, and the specific button triggering the navigation also have access to DATA
as well as the specific object (i.e., there is a button corresponding to each valid object and buttons are rendered within a FlatList
) I wonder why he chose to pass only the id, and not the entire object as a parameter to the navigation. Then the entire relevant object could be obtained within BScreen
using the same getParam()
call that is utilized to get the id, and there would not be a need to call the find()
method, saving some time. I thought that JavaScript would pass the relevant SomeModel
instance by reference, and there would not be an additional overhead of passing a larger object as a parameter, as opposed to just the id.
Am I incorrect in thinking this? Is there a source of overhead that I am overlooking? If not, is passing the ID alone a best practice for some reason, and if so, why? Is it something particular to the mechanics of react-navigation
?
I am providing sample code snippets below to help provide a more concrete picture of the use case I described above.
SomeModel.js:
class SomeModel {
constructor(id, val1, val2, ...) {
this.id = id;
this.val1 = val1;
this.val2 = val2;
...
}
}
data.js:
import SomeModel from 'SomeModel'
export const DATA = [
new SomeModel('d1', '1234', '5678',...),
new SomeModel('d2', '1234', '5678',...),
...
]
SomeNavigator.js:
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import AScreen from 'AScreen';
import BScreen from 'BScreen';
const SomeNavigator = createStackNavigator({
AScreen: AScreen,
BScreen: BScreen
});
export default createAppContainer(SomeNavigator);
AScreen.js:
import React from 'react';
import { View, FlatList, Button } from 'react-native';
import {DATA} from 'data';
const AScreen = props => {
return (
<View>
<FlatList data={DATA} renderItem={itemData => {
<Button
title='Go to Screen B!'
onPress={() => {
// There are actual buttons corresponding to SomeClass instances,
// but let's assume there is a single button passes a valid ID to an existing object
props.navigation.navigate('ScreenB', {dataID: itemData.item.id});
}}
/>
}} />
</View>
);
}
BScreen.js:
import React from 'react';
import { View, Text } from 'react-native';
import {DATA} from 'data';
const BScreen = props => {
const dataID = props.navigation.getParam('dataID');
const selectedItem = DATA.find(datum => datum.id === dataID);
return (
<View>
<Text> {selectedItem.val1} </Text>
</View>
);
}
Short Answer would be your thinking is right, But when you look into the details you can see that the method you are suggesting would not work on real world example when an API is involved.
It all comes down the design of you app and what type of data you are dealing with and how much data your components need. As you've mentioned your instructor took this path to show you an example of how things are done. If he has shown you the way you suggested and you are given a scenario to get more data you would have to find a way to do that.He is probably representing an API using his local array. You will have to make the decision on the approach you take.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With