In an enterprise app, components should be UI Only. All logic (API calls, validation, timers) should be extracted into Custom Hooks. This follows the DRY (Don't Repeat Yourself) principle and makes your code beautiful.
useEffect and fetch behind useUser(id).useWindowSize() or useLocalStorage() in 10 different components.@testing-library/react-hooks.Professional hooks are built from other hooks. A useAuth() hook might internally use useContext, useReducer, and useEffect. This layered architecture is the secret to scalable React apps.
Q: "What are the rules of Hooks?"
Architect Answer: "1) Only call hooks at the **Top Level**. Never inside loops, conditions, or nested functions. 2) Only call hooks from **React Functions** (Components or Custom Hooks). These rules ensure that React can maintain the 'Execution Order' of hooks across re-renders, which is how it knows which state belongs to which hook instance."