# babel-plugin-react-no-hook-dependency

> A babel plugin to automagically add the deps array to your hook calls.

Latest version **0.0.6** (published 2022-05-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-react-no-hook-dependency
pnpm add babel-plugin-react-no-hook-dependency
yarn add babel-plugin-react-no-hook-dependency
bun add babel-plugin-react-no-hook-dependency
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2022-05-06 |
| First published | 2022-05-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 41.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | dorshinar |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-react-no-hook-dependency
- npm.io page: https://npm.io/package/babel-plugin-react-no-hook-dependency

## Dependencies (2)

- [@babel/types](https://npm.io/package/@babel/types.md) ^7.17.0
- [@babel/traverse](https://npm.io/package/@babel/traverse.md) ^7.17.9

## Recent versions

- 0.0.6 (latest) — 2022-05-06
- 0.0.5 — 2022-05-06
- 0.0.4 — 2022-05-05
- 0.0.2 — 2022-05-04

## README

# babel-plugin-react-no-hook-dependency

A babel plugin to automagically add the deps array to your hook calls.

[![Node.js CI](https://github.com/dorshinar/babel-plugin-react-no-hook-dependency/actions/workflows/node.js.yml/badge.svg)](https://github.com/dorshinar/babel-plugin-react-no-hook-dependency/actions/workflows/node.js.yml)

## Examples

### Adding dependency array to `useMemo` call

#### In

```jsx
function App() {
  const [state, setState] = useState(0);
  const toDisplay = useMemo(() => {
    return state;
  });
  return <></>;
}
```

#### Out

```jsx
function App() {
  const [state, setState] = useState(0);
  const toDisplay = useMemo(() => {
    return state;
  }, [state]);
  return <></>;
}
```

### Leaving hook invocation untouched when a deps array is provided

#### In

```jsx
function App() {
  const [state, setState] = useState(0);
  const toDisplay = useMemo(() => {
    return state;
  }, [state]);
  return <></>;
}
```

#### Out

```jsx
function App() {
  const [state, setState] = useState(0);
  const toDisplay = useMemo(() => {
    return state;
  }, [state]);
  return <></>;
}
```

### Using a hook with no deps array

#### In

```jsx
function App() {
  const [state, setState] = useState(0);
  const toDisplay = useMemo(() => {
    return state;
  }, undefined);
  return <></>;
}
```

#### Out

```jsx
function App() {
  const [state, setState] = useState(0);
  const toDisplay = useMemo(() => {
    return state;
  });
  return <></>;
}
```

## Install

Using NPM:

```sh
npm install --save-dev babel-plugin-react-no-hook-dependency
```

Using yarn:

```sh
yarn add babel-plugin-react-no-hook-dependency --dev
```

---
_Source: https://npm.io/package/babel-plugin-react-no-hook-dependency · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._