> For the complete documentation index, see [llms.txt](https://valonekowd78.gitbook.io/tech-notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://valonekowd78.gitbook.io/tech-notes/react/custom-hooks.md).

# Custom Hooks

## useToggle

```javascript
import { useReducer } from 'react'

const useToggle = (initialValue = false) => useReducer(toggler, initialValue)
```

## useEventListener

```javascript
import { useRef, useEffect } from 'react'

const useEventListener = (eventName, handler, element = window /* , options = {} */) => {
  const savedHandler = useRef()
  //   const { capture, passive, once } = options

  useEffect(() => {
    savedHandler.current = handler
  }, [handler])

  useEffect(() => {
    if (!element || !element.addEventListener) {
      // not supported
      return
    }

    const eventListener = event => savedHandler.current(event)

    // const opts = { capture, passive, once }

    element.addEventListener(eventName, eventListener /* , opts */)

    return () => {
      element.removeEventListener(eventName, eventListener /* , opts */)
    }
  }, [eventName, element/* , capture, passive, once */])
}
```