React View–Logic Boundaries

Treat View–Logic separation as a boundary design problem, not a file-count or Hook-count exercise. The View should make the rendered structure and user intent easy to read. A custom Hook should own a meaningful stateful use case, state transition, or external-system lifecycle behind a small contract.

Read the project's existing conventions before choosing filenames, folders, data-fetching patterns, or test commands. Preserve established library and server/client boundaries.

1. Establish the component's change axes

Inspect the component, its props, context, state, Effects, event handlers, derived values, async operations, tests, stories, and nearby components. Record the following before extracting anything: