I really like Dan Abramov. He created much cool things for React community. But there is one thing I really don’t like as an “old-school” developer with 15+ years experience. It’s a concept of separation React components on “smart” and “dumb”.

Generally it’s really good idea to keep a pattern of components separation. But “Smart” and “Dumb” terms is about subjective judgement of the thinking abilities but not technical properties. I agreed those short words are more useful than something like “Independent and Well-isolated Components”.

But it’s time to re-think our terms to make it more clear & representative to describe application architecture. Especially for Junior Developers in the React world.

In our real-world applications we really have two kinds of components.

Application components

Communicate through Redux or Flux flow. Customised by props and context. Incapsulate application-specific markup and logic. It’s more like configuration to connect stores, implement “for-map-if” logic of components composing and provide an interface to actions for callbacks. It dispatches actions and listen the store to communicate with other application components. It may react on store data to show or hide some components. It may contain functions to transform callbacks to actions. It may prepare store data to translate it as props to Universal Components. Requires initiate mocks and sample data to test it. Low ability to distribution because it’s high coupled with Application environment. Contains stylesheets (CSS, JSS or inline styles — it doesn’t matter) to define theming, layout and custom styles for Universal Components.

Universal (isolated? independent?) components

Communicate through props only (attributes, callbacks). Always have a default props values. But may be customised (including className or JavaScript stylesheets). If you copy props for this component and create the component with the same props in another place you will get the same result. Isolated. Well-testable. Easy distributed (e.g. Elemental UI). Contains stylesheets to define basic (default) style. May be absolutely invisible (e.g. <input type=”hidden” />).

In early purposed “smart-dumb” concept universal components called as a “dumb”. But let’s look why is wrong.

Universal Components could have a very “smart” architecture. Sometimes it could be more smarter than an whole application. For example as universal component could be implemented WYSIWYG Editor like in Medium, File Manager in GitHub, Photo Gallery Manager, Chat, DataGrid, etc.

Even more — universal components could implement its own Redux (or Flux) instance inside.

So you could call it as “independent”, “isolated”, “well-tested”, “universal” or “sharable” components. Ever “loosely coupled components”. But please, not “dumb”. I would not like work with something “dumb”.

Core Components

React DOM, React Native and other low-level components which is using to express your Application & Universal Components. Implemented on external system level. We could not update its source. For example, if we will develop React Apps to develop OS X (or Linux, or Windows) apps it will also should be classified as Core Components.

Layers

That’s not all. We have to realize that we have an isolated layers on each level of our React applications:

State (e.g. Redux Store or Flux Stores)

Router

Application Components

Universal Components

Core Components (React DOM, React Native, etc)

If you like Functional Programming you could think about it as a transformation: (State) => Router => Application Components => Universal Components => (Core Components).

Why?

Here I want just quote Michael Jackson:

It’s true that there are two hard problems in computer science and one of them is naming things. Why? Because good names are important. A good name teaches about purpose and responsibility, so you have to spend some time thinking about it.

Benefits