Use Hook Kits
Use Hook Kits Read about Hooks feature.
Installation
Note: React 16.8+ is required for Hooks.
With npm
npm i use-hook-kits
Or with yarn
yarn add use-hook-kits
Usage
useState
import React from "react";
import { useState } from "use-hook-kits";
function App({ object, array }) {
const [state, setState] = useState(0);
const onCount = () => setState(state++, (nextState) => {// callback after change state})
const onCountPrevState = () => setState(prev => prev++, (nextState) => {// callback after change state})
return <View/>;
}
export default deepMemo(App);
deepMemo
import React from "react";
import { deepMemo } from "use-hook-kits";
function App({ object, array }) {
return <View/>;
}
export default deepMemo(App);
useMount
import React from "react";
import { useMount } from "use-hook-kits";
function App({ object, array }) {
useMount(() => {
// do something significant here
});
return <View/>;
}
useDidMount
import React from "react";
import { useDidMount } from "use-hook-kits";
function App({ object, array }) {
useDidMount(() => {
// do something significant here
});
return <View/>;
}
useDidUpdate
import React from "react";
import { useDidUpdate } from "use-hook-kits";
function App({ object, array }) {
useDidUpdate(() => {
// do something significant here
}, [object, array]);
return <View/>;
}
useDeepEffect
import React from "react";
import { useDeepEffect } from "use-hook-kits";
function App({ object, array }) {
useDeepEffect(() => {
// do something significant here
return () => {
// return to clean up that significant thing
};
}, [object, array]);
return <View/>;
}
useDeepCallback
import React from "react";
import { useDeepCallback } from "use-hook-kits";
function App({ object, array }) {
const callback = useDeepCallback(() => {
// do something significant here
}, [object, array]);
return <View/>;
}
useDeepMemo
import React from "react";
import { useDeepMemo } from "use-hook-kits";
function App({ object, array }) {
const memoized = useDeepMemo(() => {
// do something significant here
}, [object, array]);
return <View/>;
}
useInterval
import React from "react";
import { useInterval } from "use-hook-kits";
function App({ object, array }) {
useInterval(() => {
// do something significant here
}, 1000, true);
return <View/>;
}
usePrevious
import React from "react";
import { usePrevious } from "use-hook-kits";
function App() {
// State value and setter for our example
const [count, setCount] = React.useState(0);
// Get the previous value (was passed into hook on last render)
const prevCount = usePrevious(count);
return <View/>;
}
useDebounce
import React from "react";
import { useDebounce } from "use-hook-kits";
function App() {
// State value and setter for our example
const [text, setText] = useState('Hello');
//Debounce value
const [value] = useDebounce(text, 1000);
return <View/>;
}
useDebounceCallback
import React from "react";
import { useDebounceCallback } from "use-hook-kits";
function App({ object, array }) {
const [value, setValue] = useState(defaultValue);
// Debounce callback
const [debouncedCallback] = useDebounceCallback(
// function
(value) => {
setValue(value);
},
// delay in ms
1000
);
return <TextInput defaultValue={defaultValue} onChangeText={(value) => debouncedCallback(value)} />;
}
useThrottleCallback
import React from "react";
import { useThrottleCallback } from "use-hook-kits";
function App({ object, array }) {
const [value, setValue] = useState(defaultValue);
// Debounce callback
const [throttleCallback] = useThrottleCallback(
// function
(value) => {
setValue(value);
},
// delay in ms
1000
);
return <TextInput defaultValue={defaultValue} onChangeText={(value) => throttleCallback(value)} />;
}
useFocusEffect
import React, {useCallback} from "react";
import { useFocusEffect } from "use-hook-kits";
function App({ navigation }) {
useFocusEffect(() => {
//Component will focus
}, navigation);
return <View/>;
}
useTimeoutPromise
import React from "react";
import { useTimeoutPromise } from "use-hook-kits";
const fetchApi = () => new Promise((resolve, reject) => {});
function App({ object, array }) {
useEffect(() => {
const fetchData = () => useTimeoutPromise(10000,fetchApi());
// fetchData will reject after 10s if no response
fetchData();
}, [])
return <View/>;
}
useContext, useLogger
import React from "react";
import { StateProvider, useSelector, useDispatch, useLogger } from "use-hook-kits";
const stores = {
count: 0
};
const reducer = (state, action) => {
switch (action.type) {
case 'SET_COUNT':
return {
...state,
count: action.payload
};
default:
return state;
}
};
export const setCountDown = ({ dispatch, payload }) => dispatch({ type: 'SET_COUNT', payload });
// Use in App
function App({ object, array }) {
return (
<StateProvider reducer={reducer} stores={stores} logger={process.env.NODE_ENV === 'development' ? useLogger : null}>
<AppContext {...props} />
</StateProvider>
);
}
function AppContext({ object, array }) {
const count = useSelector('count');
const dispatch = useDispatch();
const onChangeCount = () => setCountDown({dispatch, count++})
return <Text>{count}</Text>
}