About a year ago we sat down to create an enterprise-level app. Our Stack of choice was React Native + Redux for the App and Azure/.net for the Backend. The aim was to create a collaboration app for the workplace which included three key components
- A hierarchical company directory
- Chat. - Group and personal
- An in-house social feed
When I got to the chat component I started to create quite a few components and asked myself how many child components is to many. Is it worth passing the functions through props down two or three levels of child components?
This is my component tree, In red are the HOC components one for android one for IOS ( Thats a whole different story with the heading of Keyboard avoiding inputs in React Native ) in the blue all the child components I used to create the chat.
The main Chat view had 3 areas . Input = ChatInput.js, ActionBar = ChatActionBar.js and ChatContent where all the chatting happened.
ChatContent had a flatlist with ChatItem in it.
Chatitem could be a simple sentence , who from and what time , how many child components do you make here?
One for the time, one for the text, one for the read/send functionality?
Chatitem could be a little more complex and have a file to download, how many components is this made of ? There is text , who from , time , and file with a download functionality
A more complex version would be replying in text to the above. Think if there is video or audio items
The main question being does each mini component in ChatItem have to be a child component on its own remembering that for performance purposes you should keep your components small, even if you have to pass down functions as props down the tree from Hoc - > ChatContent -> ChatItem -> miniComponent.
My opinion is that creating many very small components will lead to a lot of wasted coding time. In the real world not always are the names we give functions exactly what they are due to time constraints , pressure, laziness or just simple mistakes.
Keep your components small but don't overdo it. Tracking a function from 3 levels above is time consuming especially if there is a lot of functionality in each item.