Frontend Developer

0xLDev

Frontend Developer

0xLDev / useMountedRef.js

Created December 18, 2021 08:49

	import { useEffect, useRef } from 'react';

	export const useMountedRef = () => {
	const isMountedRef = useRef(true);

	useEffect(() => {
	const beforeUnmount = () => {
	isMountedRef.current = false;
	};
	return beforeUnmount;

0xLDev / useInterval.js

Created December 18, 2021 08:47

	import { useCallback, useEffect, useState, useRef } from 'react';

	export const useInterval = (callback, delay) => {
	const callbackRef = useRef(callback);
	const [intervalHandle, setIntervalHandle] = useState(null);
	const [trigger, setTrigger] = useState();

	useEffect(() => {
	callbackRef.current = callback;
	}, [callback]);

0xLDev / useElementSize.js

Created December 18, 2021 08:46

	import { useCallback, useEffect, useState } from 'react';
	import { useEventListener } from 'useEventListener';

	const DEFAULT_SIZE = {
	width: 0,
	height: 0,
	};

	export const useElementSize = (elementRef) => {
	const [size, setSize] = useState(DEFAULT_SIZE);

0xLDev / usePrevious.js

Created December 18, 2021 08:43

	import { useEffect, useRef } from 'react';

	export const usePrevious = (value) => {
	const refContainer = useRef(value);

	useEffect(() => {
	refContainer.current = value;
	}, [value]);

	return refContainer.current;

0xLDev / useAsync.js

Created December 18, 2021 08:42

	import { useCallback, useState } from 'react';

	export const ASYNC_STATUS = {
	IDLE: 'idle',
	PENDING: 'pending',
	SUCCESS: 'success',
	ERROR: 'error',
	};

	export const useAsync = (asyncFunc) => {

0xLDev / useAnimatedText.js

Created December 18, 2021 08:40

	import { useEffect, useState } from 'react';

	export const useAnimatedText = (text, delayMs) => {
	const [currentPos, setCurrentPos] = useState(0);

	useEffect(() => {
	const intervalHandle = setInterval(() => {
	setCurrentPos((pos) => {
	const isLast = pos === text.length - 1;
	return isLast ? 0 : pos + 1;

0xLDev / useWindowSize.js

Created December 18, 2021 08:39

	import { useCallback, useEffect, useState } from 'react';
	import { useEventListener } from 'useEventListener';

	const INITIAL_SIZE = [0, 0];

	export const useWindowSize = () => {
	const [size, setSize] = useState(INITIAL_SIZE);

	useEffect(() => {
	const { innerWidth, innerHeight } = window;

0xLDev / useThrottle.js

Created December 18, 2021 08:37

	import { useEffect, useState, useRef } from 'react';

	export const useThrottle = (value, delay) => {
	const [throttledValue, setThrottledValue] = useState(value);
	const valueRef = useRef(value);

	useEffect(() => {
	valueRef.current = value;
	}, [value]);

0xLDev / useDebounce.js

Created December 18, 2021 08:36

	import { useEffect, useState } from 'react';

	export const useDebounce = (value, delay) => {
	const [debouncedValue, setDebouncedValue] = useState(value);

	useEffect(() => {
	const timeoutHandle = setTimeout(() => {
	setDebouncedValue(value);
	}, delay);

0xLDev / useWhatCausedRender.js

Created December 18, 2021 08:28

	import { useEffect, useRef } from 'react';

	export const useWhatCausedRender = (name, props) => {
	const prevPropsRef = useRef({});
	useEffect(() => {
	const changes = [];
	const prevProps = prevPropsRef.current;
	const keySet = new Set([...Object.keys(prevProps), ...Object.keys(props)]);

	keySet.forEach((key) => {