elements
lifecycle
browser
- useAudio
- useBattery
- useBluetooth
- useBreakpoints
- useBroadcastChannel
- useBrowserLocation
- useClipboard
- useCopy
- useCssVar
- useDisplayMedia
- useDocumentEvent
- useDocumentTitle
- useDocumentVisibility
- useEventListener
- useEventSource
- useEyeDropper
- useFavicon
- useFileSystemAccess
- useFps
- useFullscreen
- useGamepad
- useGeolocation
- useMeasure
- useMediaControls
- useMediaQuery
- useMemory
- useNetwork
- useObjectUrl
- useOnline
- useOtpCredential
- usePermission
- usePictureInPicture
- usePointerLock
- usePostMessage
- useRaf
- useShare
- useSpeechRecognition
- useSpeechSynthesis
- useSticky
- useVibrate
- useVirtualKeyboard
- useWakeLock
- useWebSocket
utilities
state
- useBoolean
- useControllableState
- useCookie
- useCookies
- useCounter
- useCycleList
- useDefault
- useDisclosure
- useField
- useHash
- useList
- useLocalStorage
- useMap
- useMask
- useMergedRef
- useObject
- useOffsetPagination
- useQueue
- useRafState
- useRefState
- useSessionStorage
- useSet
- useStateHistory
- useStep
- useStorage
- useToggle
- useUrlSearchParam
- useUrlSearchParams
- useValidatedState
- useWizard
user
sensors
- useDeviceMotion
- useDeviceOrientation
- useHotkeys
- useIdle
- useInfiniteScroll
- useIntersectionObserver
- useKeyboard
- useKeyPress
- useKeysPressed
- useMouse
- useMutationObserver
- useOrientation
- usePageLeave
- useParallax
- usePerformanceObserver
- useResizeObserver
- useScroll
- useScrollIntoView
- useScrollTo
- useSwipe
- useTextSelection
- useVisibility
- useWindowEvent
- useWindowFocus
- useWindowScroll
- useWindowSize
Warning
This hook will run effect only once even in strict mode. Please do not use it in production code!
This effect ran once
With useOnce the effect fires a single time, even in Strict Mode where a regular effect would run twice. Open the console to see the log.
import { useOnce } from '@siberiacancode/reactuse';
const Demo = () => {
useOnce(() => {
console.log('effect ran once');
});
return (
<section className='flex w-full max-w-md flex-col items-center gap-3 p-6'>
<div className='flex flex-col items-center gap-1 text-center'>
<h2 className='text-foreground text-sm font-semibold'>This effect ran once</h2>
<p className='text-muted-foreground text-xs'>
With <b>useOnce</b> the effect fires a single time, even in Strict Mode where a regular
effect would run twice. Open the console to see the log.
</p>
</div>
</section>
);
};
export default Demo;
Installation
pnpm add @siberiacancode/reactuseUsage
useOnce(() => console.log('effect once'));Type Declarations
import type { EffectCallback } from 'react';API
Parameters
| Name | Type | Default | Note |
|---|---|---|---|
| effect | EffectCallback | - | The effect to run |
Contributors
ddebabin
Last updated on