CODEWITHSUNDEEP
javascriptreact-nativerenderjsx
dpatel125
dpatel125

Reputation: 121

Rendering in React-Native

I am relatively new to react native and in general building anything with a UI. I am wondering when it is appropriate to use the render{} function when programming an app. I ask this because I wonder the effects on the app. For instance, if I create a <LinkedIcon> component and try to have a large number of them on one screen, then should every dot have a call to render. If not what would I do instead.

Example code:

    import React, { Component } from "react";
    import { Linking, View, TouchableHighlight } from "react-native";
    import Icon from "react-native-vector-icons/FontAwesome";

    class LinkedIcon extends Component<Props> { //will show about up to 20 on one screen 
      render() {
        return (
           <TouchableHighlight>
           <Icon title="circle" size={15} />
         </TouchableHighlight>
        );
      }
    }

    export default LinkedIcon;

Upvotes: 0

Views: 920

Answers (2)

Tim
Tim

Reputation: 10709

Your component looks like it can be implemented as a stateless/functional component, where you do not have access to the react native lifecycle methods, which makes the component more lightweight/faster.

Your LinkedIcon component as functional/stateless component may look like this: 

const LinkedIcon = (props) => {
   return (
       <TouchableHighlight>
           <Icon title="circle" size={15} />
       </TouchableHighlight>
   );
}

Now you can easily instantiate multiple LinkedIcons in a parent component which may be a stateful component, where you could handle the LinkedIcons states (if you want). 

class Main extends Component {

   render(){
      return (
         <View>
            <LinkedIcon .../>
            <LinkedIcon .../>
             ...
         </View>
      );
   }
}

Upvotes: 2

Dres
Dres

Reputation: 1499

Maybe somebody can provide a better answer but to my understanding, you'd want to use a class if you have a local state you need to manipulate. It has something to do with the file size of a class vs a non class component. In this case I'd recommend making your file a dumb component since there is no local state.. you're just passing props down from a parent instead.

const LinkedIcon = props => (
    <TouchableHighlight>
        <Icon title="circle" size={15} />
    </TouchableHighlight>
)

Hope this helps!

Upvotes: 1

Related Questions