Chapter 115: Rules of React — React Calls Components and Hooks

Core Idea

Components and Hooks should never be called directly as plain functions by your own code — React must be the one calling them, because it does specific bookkeeping (tracking Hook state, scheduling, context) around each call that a manual call bypasses entirely.

Key Concepts

Never call a component like MyComponent() to "get its output" — always render it via JSX (<MyComponent />). A direct call skips React's rendering machinery (Hook state tracking, error boundary participation, DevTools visibility) and treats the component as an ordinary function, which breaks the moment it uses any Hook internally.
Never call a custom Hook like a plain helper function outside of a component/another Hook's render — Hooks rely on being called in a specific, React-tracked position during a component's (or another Hook's) render to correctly associate their internal state across renders; calling one "manually" from arbitrary code loses that association.
This is what makes "always render via JSX, always call Hooks from component/Hook bodies" a hard rule, not a style guideline — both restrictions exist because React's Hook-state bookkeeping is keyed to how and when it observes the call happening, not just to the function reference itself.
A component receiving another component as a value (e.g. passed as a prop for later rendering, like a "render prop" pattern) is fine and common — the rule is about not invoking it directly as a function call to extract output, not about passing component references around.

Code Examples

// ❌ Wrong: calling a component like a plain function
const output = MyComponent({ name: 'Ada' });

// ✅ Correct: let React render it via JSX
<MyComponent name="Ada" />

What it demonstrates: the specific mistake this rule forbids — treating a component function as a plain callable rather than something only React should invoke via the render process.

Key Takeaways

If you find yourself writing SomeComponent(props) instead of <SomeComponent {...props} /> to "compute" its JSX, that's a rule violation, not a valid shortcut.
Custom Hooks follow the same restriction as built-in ones — call them from a component or another Hook's body, never as a standalone utility function call from arbitrary code.
Passing a component reference as a prop/value is unrelated to this rule — only direct invocation outside React's own rendering process is the problem.

Connects To

Ch 116 (Rules of Hooks): the closely related rule about Hook call structure (order, conditionals).
Ch 11 (Your First Component): the basic "render via JSX" convention this rule formalizes as a hard requirement.