Props and Props Drilling in React

props

Props is short form of properties or can be known as parameters, last chapter I have discussed about state in react native, today I will discuss about props(properties). In react native, props are mutable(unchangeable).  Not like state, states are immutable(changeable),

We cannot change content of property, but we can customize how we use these props in according with our need and situation, that’s why it’s called mutable.

Ex for props use with <Text> tag- 

·     onPress

·     style

·     disable

·     onLayout

·     selectable

    <View>

         <Textstyle={{color: "red”}} >Test Text</Text>

        </View>

      </View>

In here we created <view> component and inside it we create <Text> component use property called style, we can reuse this <Text> components in deferent locations with different styles, from that we can achieve reusability. 

Prop Drilling

I am going to explain this concept by getting a example, as an example lets imagine we have several components(parent component and child component, and that child has another child component like vice) and a parent component has several properties, in other words props, in those scenario lets imagine 1^stchild component doesn’t need parent component properties, but 2^ndchild need some properties of parent, in this situation we have to drill 1^stcomponent if we need to get properties of parent, when drill effect happens properties of parent comes to the 1^stchild and after pass it to the 2^ndchild, this can be caused to grow complexity in out program. We can avoid this by using the ‘State’, state holds values and only activated if only we need to access those values (prop Drilling is not happening with State), later I will talk about redux,

Conclusion

Prop and Prop Drilling is very important concept we should understand in react native, this concept will help us to understand what is state is and also to understand redux.