@dinnertime/react-hooks

useMounted

Component가 Mount되었을때 실행

- Promise 및 async function을 바로 사용 가능

``ts
useMounted: (executor: () => any | Promise) => void;

// ex
useMounted(() => {
console.log('Mounted');
})
`

useUnmounted

Component가 Unmount되었을때 실행

- Promise 및 async function을 바로 사용 가능

`ts
const useUnmounted: (executor: () => any | Promise) => void;

// ex
useUnmounted(() => {
console.log('Unmounted');
});
`

useDebounce

debounce로 동작하는 함수 정의

> Debounce는 특정 작업이 연속해서 호출될 때, 마지막 호출이 끝난 후 일정 시간이 지나기 전까지는 해당 작업을 수행하지 않도록 하는 기술입니다. 주로 입력 폼이나 스크롤 이벤트 처리 등에서 과도한 이벤트 호출을 방지하기 위해 사용됩니다. ( described by Chat Gpt )

`ts
function useDebounce void>(
callback: T,
delay: number,
): (...args: Parameters) => void;


// ex. 검색 컴포넌트
const SearchComponent = () => {
const [query, setQuery] = useState('');
const [results, setResults] = useState([]);

const debounceFetchResults = useDebounce((searchQuery: string) => {
// 여기에 API 호출이나 검색 결과를 가져오는 로직을 추가하세요.
console.log(Fetching results for: ${searchQuery});
setResults([searchQuery]); // 예제에서는 단순히 검색어를 결과로 설정
}, 300);

const handleChange = (e: ChangeEvent) => {
const value = e.target.value;
setQuery(value);
debounceFetchResults(value);
};

return (


`ts
function useThrottle void>(callback: T, delay: number): (...args: Parameters) => void;

// ex 스크롤 이벤트 컴포넌트
const ScrollComponent = () => {
const [scrollPosition, setScrollPosition] = useState(0);

const throttleHandleScroll = useThrottle(() => {
const position = document.documentElement.scrollTop;
console.log(position);
setScrollPosition(position);
}, 300);

useEffect(() => {
window.addEventListener('scroll', throttleHandleScroll);
return () => {
window.removeEventListener('scroll', throttleHandleScroll);
};
}, []);

return (


`ts
function useOnlineStatus(): boolean;

// ex

const OnlineStatus = () => {
const status = useOnlineStatus();

useEffect(() => {
alert(Is Online: ${status});
}, [status]);

return null;
};
`

useLocalStorage

localStorage로 state 관리

`ts
function useLocalStorage(key: string): {
value: T | null;
isDispatching: boolean;
dispatch: (
value:
| (T | null)
| ((newValue: T | null) => T | null)
| ((newValue: T | null) => Promise),
) => void;
effect: (fn: (data: T | null) => any | Promise) => void;
compute: (fn: (data: T | null) => R) => R;
};

// ex

const { value, isDispatching, dispatch, effect, compute } =
useLocalStorage('Favorites');
``