Updated for 2026: this post originally described a 2019 build — React Native with Redux, HOC-per-platform components, and pre-hooks patterns. The core question aged well, so we refreshed the examples and the advice around it.
A few years ago we sat down to create an enterprise-level collaboration app — company directory, group and personal chat, and an in-house social feed — in React Native. Building the chat, I started creating quite a few components and asked myself: how many child components are too many? Is it worth passing data down two or three levels of child components?
The chat view had three areas: an input (ChatInput), an action bar (ChatActionBar), and ChatContent, where all the chatting happened. ChatContent rendered a list of ChatItems.
A ChatItem could be a simple sentence — who from, what time. Do you make a child component for the time, one for the text, one for the read/sent indicator? A more complex item might carry a file download, or a quoted reply, or audio and video. Does each mini-piece of ChatItem have to be a component of its own — remembering that for performance you are told to keep components small?
What we said then (and still believe)
Creating many very small components leads to a lot of wasted coding time. In the real world, names drift from what functions actually do — time pressure, laziness, simple mistakes — and tracking a callback three levels up the tree is expensive, especially in a busy component.
Keep your components small, but don't overdo it. Split when a piece has independent reason to change or re-render, not because a style guide says small is good.
What 2026 changes about the answer
- Hooks replaced the HOC towers. The original build had per-platform HOC wrappers two deep before any chat code ran. Today that logic lives in hooks (
useKeyboardHandling,useChatScroll), and the tree stays flat — which removes most of the prop-drilling pain that motivated the question. - Prop drilling is now a choice. Co-locate state with hooks; for genuinely shared state, a small store (Zustand, Jotai, or Redux Toolkit if you are already there) plus TanStack Query for server state means child components subscribe to what they need instead of receiving it through four layers.
- Split for re-renders, measured.
React.memoon the list item — not on every fragment inside it — is usually the whole win. Profile first; the React DevTools profiler will tell you which splits pay. - Use the right list. A chat is exactly where FlashList earns its keep; item components stay simple, and recycling does the performance work component-splitting used to fake.
The question hasn't changed. The answer is still "fewer, slightly larger components than your instincts say" — hooks just made the good version much easier to write.