---
# System prepended metadata

title: Composing use Hooks
tags: [Composing new APIs]

---

# Composing use Hooks

> * 如有錯誤處指正或任何建議，懇請留言，感謝!
> * 搭配 ChatGPT 進行翻譯，請小心服用
> * ▸ ... 為英文原文


:::spoiler ...
Hooks are a way to abstract common logic away from the components that use it. They are a way to share logic between components. While Qwik provides many hooks, there will always be one that is not provided out of the box. This tutorial will show you how to create your own hook.

In this example, the registering of `mousemove` events is something that could be shared between multiple components. Refactor the code by pulling out the code before JSX into its own `useMousePosition()` function.

Congratulations, you have successfully created your own hook! You can now use it in any component that needs to listen to the mouse position.
::: 



###### tags: `Composing new APIs`