open-index/open-npm huggingface dataset:
npm package: @smart-hooks/helper-traverse-scheme-keys
Description: Helper for use-interstate and use-multi-state packages
Author: Andrei Kovalev
Latest version: 5.2.1

# `@smart-hooks/helper-traverse-scheme-keys`

> TODO: description

## Usage

```
const helperTraverseSchemeKeys = require('@smart-hooks/helper-traverse-scheme-keys');

// TODO: DEMONSTRATE API
```
npm package: @smart-hooks/use-multi-state
Description: Use one useMultiState instead multiple useState's
Author: Andrei Kovalev
Latest version: 3.2.1

# useMultiState

There may be a lot of reasons to use multiple instances of React hook `useState` in a single
component. There may also be too much repetition in those cases when you define all needed states.
`useMultiState` provides a way to wrap all of these `useState`'s into one hook that will act exactly
way but without to be such verbose and messy.

## Install

```bash
npm install @smart-hooks/use-multi-state --save
```

## Usage

Giving the following example where we use ordinary `useState`:

```jsx
function Component() {
  const [color, setColor] = useState('blue');
  const [theme, setTheme] = useState({ textSize: 'medium', hyphenations: true });
  const [density, setDensity] = useState(() => {
    // calculate init value
  });

  return (
    <>
      <ControlComponent color={setColor} theme={setTheme} density={setDensity} />
      <DisplayComponent {...{ color, theme, density }} />
    </>
  );
}
```

We can rewrite this logic by using `useMultiState` in less repetitive and readable way:

```jsx
import { useMultiState } from '@smart-hooks/use-multi-state';

function Component() {
  const [state, setState] = useMultiState({
    color: 'blue',
    theme: { textSize: 'medium', hyphenations: true },
    density: () => {
      // calculate init value
    },
  });

  return (
    <>
      <ControlComponent {...setState} />
      <DisplayComponent {...state} />
    </>
  );
}
```

As in the case of using `useState` when you get setter that is [guaranteed stable and
immutable](https://reactjs.org/docs/hooks-reference.html#usestate), with `usMultiState`, you have an
object that alone has a stable identity, and its properties on their turn effectively are setters
emitted by `useState` calls hence stable and immutable. You can use numbers, strings, and symbols
for properties names.
npm package: @smart-hooks/use-smart-memo
Description: Make useMemo predictable
Author: Andrei Kovalev
Latest version: 4.0.2

# useSmartMemo

There is a temptation to use the standard React hook `useMemo` not only for the sake of performance
optimization. But in the official documentation, it says clearly: [**You may rely on `useMemo` as a
performance optimization, not as a semantic
guarantee**](https://reactjs.org/docs/hooks-reference.html#usememo). `useSmartMemo` is for the
control over the execution of some part of code skipping it if values passed to a dependencies list
do not change. Most often, the execution of `useSmartMemo` is relying upon the original `useMemo`
and doing nothing more than just invoking it. But since _React may choose to “forget” some
previously memoized values and recalculate them on next render_, `useSmartMemo` has an additional
barrier inside `useMemo` that prevents such recalculations.

## Install

```bash
npm install @smart-hooks/use-smart-memo --save
```

## Usage

```js
import { useSmartMemo } from '@smart-hooks/use-smart-memo';

useSmartMemo(() => {
  // conditional code
}, [v1, v2]);
// As long as the values of v1, v2 are not changing, the code inside the function will not
// re-execute
```