You need to enable JavaScript to run this app.
H
o
o
k
s
.guide
built-in
useEffect
useReducer
useRef
useState
constate
useContextReducer
useContextState
react-hanger
useArray
useBoolean
useInput
useOnMount
useOnUnmount
react-powerhooks
useActive
useInterval
useMap
useToggle
react-use
useAsync
useBattery
useFavicon
useGeolocation
useHover
useLifecycles
useLocation
useLogger
useMedia
useMount
useRaf
useSetstate
useSpeech
useTimeout
useTitle
useUnmount
useUpdate
rehooks
useComponentSize
useDeviceOrientation
useDocumentTitle
useInputValue
useLocalStorage
useNetworkStatus
useOnlineStatus
useWindowMousePosition
useWindowSize
the-platform
useDeviceMotion
useDeviceOrientation
useIntersectionObserver
useNetworkStatus
useWindowScrollPosition
useWindowSize
Community
promiseHook
showCaseYourHook
useDraggable
useFocus
useKeypress
useKonamiCode
useMedia
useSession
useThrottle
H
o
o
k
s
.guide
useEffect
https://reactjs.org/docs/hooks-effect.html
The Effect Hook lets you perform side effects in function components
🚀 Usage
Pretty
Copy
1
function
Demo
(
)
{
const
[
count
,
setCount
]
=
useState
(
0
)
;
// Similar to componentDidMount and componentDidUpdate:
useEffect
((
)
=>
{
// Update the document title using the browser API
document
.
title
=
`
You clicked
${
count
}
times
`
;
})
;
return
(
<
div
>
<
p
>
You clicked
{
count
}
times
</
p
>
<
button
onClick
=
{
(
)
=>
setCount
(
count
+
1
)
}
>
Click me
</
button
>
</
div
>
)
;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
âš¡Preview
You clicked 0 times
Click me
🚨 console
💄 Improve this hook
Contributors
Raathigeshan