docs

Author: aldrinpvincent

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+docs/node_modules
+docs/.docusaurus
+docs/build
+docs/src/hooks
+dist
+example
+test

docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/docs/Installation.md

@@ -0,0 +1,14 @@
+---
+id: hooks
+---
+
+# Getting started
+
+Introduction to all utils and things
+
+
+## NPM detils
+ 
+## Usage 
+
+

docs/docs/useDebounce.md

@@ -0,0 +1,47 @@
+# useDebounce
+
+A hook for debouncing.
+
+## Examples
+
+```jsx live
+function DebounceExample(props) {
+  const delayInMilliseconds = 1000;
+  const [query, setQuery] = React.useState('');
+  const debouncedQuery = useDebounce(query, delayInMilliseconds);
+
+  return (
+    <>
+      Debounced value will get updated after {delayInMilliseconds}ms once you
+      stop typing
+      <br />
+      <input
+        value={query}
+        onChange={e => setQuery(e.target.value)}
+        placeholder="Enter query"
+      />
+      <br />
+      Entered value: <b>{query}</b>
+      <br />
+      Debounced value: <b>{debouncedQuery}</b>
+      <br />
+    </>
+  );
+}
+```
+
+## API
+
+```typescript
+const debouncedValue = useDebounce(
+  value: any,
+  delay?: number
+);
+```
+
+### Params
+
+| Property | Description                | Type     | Default |
+| -------- | -------------------------- | -------- | ------- |
+| value    | The value to be debounced. | `any`    | -       |
+| delay    | Delay in milliseconds      | `number` | 500     |

docs/docs/useIsMounted.md

@@ -0,0 +1,37 @@
+# useIsMounted
+
+This hook is used to check whether the component is mounted or not. This hook will return a function which return a boolean value stating the component is mounted or not on invoking. This will be useful if you want to perform some operation based on component is mounted or not like stop polling an api, update state etc.
+
+## Usage
+
+```typescript
+const isMounted = useIsMounted();
+if (isMounted()) {
+  // continue
+}
+```
+
+## Examples
+
+## API
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs>
+<TabItem value="js" label="JavaScript">
+
+```js
+const isMounted = useIsMounted();
+```
+
+</TabItem>
+<TabItem value="ts" label="Typescript">
+
+```typescript
+const isMounted: () => Boolean = useIsMounted();
+```
+
+</TabItem>
+
+</Tabs>

docs/docs/usePrevious.md

@@ -0,0 +1,62 @@
+# usePrevious
+
+If you want to access the previous props or state in functional components, you can use the `usePrevious` hook. This hook would work for props, state, or any other calculated value.
+
+## Usage
+
+```typescript
+const [value, setvalue] = useState(initialState);
+const previousValue = usePrevious(value);
+```
+
+## Examples
+
+```jsx live
+function PreviousStateExample(props) {
+  const [count, setCount] = useState(0);
+  const prevCount = usePrevious(count);
+
+  return (
+    <div>
+      Current value: <b>{count}</b>, Previous value: <b>{prevCount}</b>
+      <br />
+      <button onClick={() => setCount(count + 1)}>+ count</button>
+      <button
+        style={{ marginLeft: '10px' }}
+        onClick={() => setCount(count - 1)}
+      >
+        - count
+      </button>
+    </div>
+  );
+}
+```
+
+## API
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs>
+<TabItem value="js" label="JavaScript">
+
+```js
+const previousState = usePrevious(state);
+```
+
+</TabItem>
+<TabItem value="ts" label="Typescript">
+
+```typescript
+const previousState: T = usePrevious<T>(state: T);
+```
+
+</TabItem>
+
+</Tabs>
+
+### Params
+
+| Property | Description                                       | Type  | Default |
+| -------- | ------------------------------------------------- | ----- | ------- |
+| value    | The state/prop value that previous value required | `any` | -       |

docs/docs/useSafeReducer.md

@@ -0,0 +1,19 @@
+
+# useSafeReducer
+
+A memory safe version of react's `useSafeReducer` hook.
+
+This hook will prevent memory leaks by checking the component is unmounted before the state update operation due to `dispatch` if the component is unmounted, it will jsut ignore the `dispatch` operation. The API is same as react's `useReducer` hook, so you can use this hook instead of `useReducer` for asynchronous opration to avoid any memory leak.
+
+## Examples
+
+### Basic usage
+
+
+
+## API
+
+```typescript
+const [state, dispatch] = useSafeReducer(initialState, reducer)
+```
+

docs/docs/useSafeState.md

@@ -0,0 +1,58 @@
+# useSafeState
+
+A memory safe version of react's `useState` hook. In react memory leak occurs when `setState` operation performed on an unmounted component. This happens mostly with asynchronous opration like api calls.
+
+For example, if the user initiated an api call and navigated away from tha page before the call is returned, the component will get unmounted and when the api call is fulfilled, `setstate` will be performed on the unmounted component causing a memory leak.
+
+This hook will prevent these kind of memory leaks by checking whether the component is mounted before `setstate` operation, if the component is unmounted, it will jsut ignore the `setstate` call. The API is same as react's `useState` hook, so you can use this hook instead of `useState` for asynchronous opration to avoid any memory leak.
+
+## Usage
+
+```typescript
+const [value, setvalue] = useSafeState(initialState);
+```
+
+## Examples
+
+```jsx live
+function SafeStateExample(props) {
+  const [count, setCount] = useSafeState(0);
+
+  return (
+    <div>
+      Current value: <b>{count}</b>, Previous value: <b>{prevCount}</b>
+      <br />
+      <button onClick={() => setCount(count + 1)}>+ count</button>
+      <button
+        style={{ marginLeft: '10px' }}
+        onClick={() => setCount(count - 1)}
+      >
+        - count
+      </button>
+    </div>
+  );
+}
+```
+
+## API
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs>
+<TabItem value="js" label="JavaScript">
+
+```js
+const [state, setState] = useSafeState(initialState);
+```
+
+</TabItem>
+<TabItem value="ts" label="Typescript">
+
+```typescript
+const [state, setState] = useSafeState(initialState);
+```
+
+</TabItem>
+
+</Tabs>

docs/docs/useWhyDidYouUpdate.md

@@ -0,0 +1,28 @@
+
+# useWhyDidYouUpdate
+
+Help developers troubleshoot what changes have caused component rerender.
+
+## Examples
+
+### Default usage
+
+## API
+
+```typescript
+type IProps = Record<string, any>;
+
+useWhyDidYouUpdate(componentName: string, props: IProps): void;
+```
+
+### Params
+
+| Property      | Description                                                                                 | Type     | Default |
+|---------------|---------------------------------------------------------------------------------------------|----------|---------|
+| componentName | Required, the name of the observation component                                             | `string` | -       |
+| props         | Required, data to be observed (`state` or `props` and other data that may lead to rerender) | `object` | -       |
+
+
+### Result
+
+Please open the browser console, you can see the output of the changed observed `state` or `props`.