Hook / Composable
A reusable function that packages state and lifecycle logic while leaving each component in charge of its own markup.
See it
What it is
A Hook or composable is a function that packages reusable component logic without packaging any markup. React shipped Hooks in 16.8 and Vue 3 followed with the Composition API. A React custom Hook can combine useState and useEffect; a Vue composable can combine refs, computed values, and lifecycle hooks. Callers get values and actions while keeping control of what they render.
Extract one when several components repeat the same synchronization or state transition, such as tracking a media query, online status, or form field. The reuse is the recipe, not one shared state instance: two calls normally create two independent copies unless the function connects them to the same external store.
Gotcha: framework rules still apply inside the abstraction. React Hooks must be called unconditionally at the top level, and their dependencies must be honest. Do not hide a grab bag of unrelated effects behind one convenient name; a good Hook has one reason to be used.
Ask AI for it
Extract the repeated responsive logic into a typed React useMediaQuery Hook built on window.matchMedia. Initialize from MediaQueryList.matches, subscribe with addEventListener('change'), remove that exact listener in the useEffect cleanup, and return a boolean. Show two components calling the Hook independently, and keep all Hook calls unconditional and at the top level.