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>
}