Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Passing id vs. passing object in react-navigation

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>
    );
}

like image 305
ilim Avatar asked Oct 17 '25 08:10

ilim


1 Answers

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.

  • Scenario 1 : You have a local array of objects which is shown in a flat list and you have an onpress which takes you to the next screen and passes the Id. The instructor probably would have taken this approach to explain what you would do in a real world app, that is to get the data required in the next screen.
  • Scnario 2 : You pass the object as a whole this gives the advantage as the next screen would be a dumb component which would just display content based on the data that is passed. Would work great on local arrays just as you asked.
  • Scenario 3 : You use an api to get a list of items and show details of a single item in a separate page, If you bring all the data required for the second screen it would take more network bandwidth and more processing power on the server and it would load more content to the memory of the mobile device. And the user might not click all items at all so the fields you bring would be a waste. So the next screen would get the id and request for more data from the server.
  • Scenario 4 : Think of a list of a small class object with just two or three fields you get from the API, in this scenario if the second screen does not need any more data we can just pass the object just like scenario 2.

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.

like image 188
Guruparan Giritharan Avatar answered Oct 19 '25 20:10

Guruparan Giritharan



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!