It’s taken 5 unique concepts to make a Greeting component behave nearly as transparently as an HTML element. I’m starting to see why folks say React is hard.

So I have to ask:
Is the work we did with Greeting — the simplest component in the React docs — valuable?

No, it isn’t.

These two lines would be clearer:

let greet = (name) => `Hello ${name}.`;
<strong>{greet("chantastic")}</strong>;

The solution is more composable. It uses fewer lines. And we don’t need to know about component injection, destructured prop reassignment, component-array switching, capturing and spreading host element attributes, className munging, or clobbering the children prop (which we hadn’t even addressed yet)…

We simply use a function and a regular HTML element.

Novel!

Take it Home

This lesson might feel like a trick. It’s not. Most of the clever things we do in React might be better expressed as a JavaScript function and common HTML element.

Don’t stack clever feature atop clever feature just to re-create what already exists. Ask yourself if the task at hand needs a component at all. You might be surprised to find that it doesn’t.

Do you have a component that causes harm instead of creating value? Hit reply and let me know.