What you need to know about functional stateless components in React and React Native

~This post is reposted with permission from author Feargal Walsh, one of our main developers at Zonder.~

At Zonder we use Functional Stateless Components as much as we possibly can. The ability to modularize entire screens into small manageable blocks is priceless to us as it enables us to quickly build components and pass them around our app. This is extremely useful when feedback is starting to roll in and we want to quickly iterate on parts of the app without having to completely redesign the architecture. It also enables us to reuse components, for example: this flatList that I designed recently can be used anywhere in the app. The style and props are fully editable and decoupled from the flatlist itself.

const FSCList = ({data}) => {
return (
<List> //from react-native-elements libraty
<FlatList
style={styles.flatListStyle}
horizontal={false}
data={data}
keyExtractor={(item, index) => item.id}
renderItem={({item}) => (
<ListItem
title= {item.name}
hideChevron = {true}
/>
)}
/>
</List>
)}

The component FSCList can be passed around like a variable, in order to call it all you have to do is specify the props you want to use either by passing them using mapStateToProps which is what I have done here or by passing them when you create an instance of the list in another component like so:

<View {style = styles.FSCListContainer}>
<FSCList>
data = {this.props.FSCListData}
</FSCList>
</View>

This parent component could be either an FSC or a stateful component, in the case of the stateful component the data could be passed using {this.state.FSCListData}.

This is by far the most intuitive and simple means of generating reusable and modularized code that I have come across. The combination of this technique and redux allows you to access your state as props anywhere in your code, all you need is the connect keyword at the end of your component. I can’t speak highly enough of this method as far as developer productivity is concerned. Actually getting stuff working on the screen that your boss and users cares about rather than fiddling around with complex coupled components becomes a breeze.

Thanks for your attention, it’s the most valuable thing you can give anyone. The hardest thing about writing these posts is often getting started, so any suggestions/requests for topics would be appreciated! I also welcome feedback on previous posts.

If you liked what you have read here and would like to hear more from me please feel free to sign up for my e-mail list on my personal site here, or at the very least…

https://www.youtube.com/watch?v=DdCYMvaUcrA

Special Thanks

Noah Allen for the guidance when I was struggling with this concept.

Demi and Harry for the opportunity to contribute to the mission in this way.

Resources

Functional Stateless Components in React