Building blocks.
WHAT A COMPONENT SHOULD DO
One identifiable thing.
WHAT MAKES A GOOD ONE
A clear purpose A small, well-named set of props No dependence on where it is used Predictable output for given input
WHAT PROPS SHOULD BE
The data and callbacks a component needs.
WHAT TO AVOID
Many props, which usually indicates a component doing too much Props passed through several layers to reach a descendant Modifying props, which are not yours to change
WHAT THAT SECOND POINT IS CALLED
Prop drilling, and it indicates the state may belong elsewhere.
WHAT COMPOSITION PROVIDES
Passing components as children, rather than configuring with props.
WHY THAT IS PREFERABLE
It keeps components flexible without accumulating options.
WHAT TO SEPARATE
Components that display, from components that fetch and decide.
WHY
Presentational components are reusable and easy to test.
WHAT TO DEFINE FOR EVERY COMPONENT
Every state it supports: default, loading, empty, error, disabled.
WHAT TO NAME COMPONENTS AFTER
What they are, not what they look like.
