react-guidelines

React components should be defined as default-exported functions in separate files, with stateful logic moved into dedicated custom hooks rather than using useState or useEffect directly in components. This separation improves maintainability and keeps components focused on rendering.

One file per hook or component reduces cognitive load during code reviews and prevents common pitfalls. Dedicated files for hooks like useBot or useBacktesting make stateful logic reusable, testable, and easier to maintain across your React codebase.

Avoid using any and anonymous types in React code. Instead, create explicit TypeScript types for props, state, and return values. This prevents runtime errors and makes your component interfaces clear to other developers during code reviews.

Run lint, type-check, and format checks whenever you modify React code. These automated quality gates catch violations of your React guidelines early and ensure consistency across your frontend codebase without manual review delays.

No. React guidelines require moving all stateful logic into custom hooks. This pattern keeps components pure, focused on rendering, and makes hooks reusable across multiple components instead of duplicating logic.

Follow the prescribed structure for new pages: use default-exported function components, place each hook and component in its own file, use explicit TypeScript types, and ensure all changes pass lint and type checks before merging.