# \<Memo />

Source code is hosted on [GitHub](https://github.com/corets/memo)

{% tabs %}
{% tab title="yarn" %}

```bash
yarn add @corets/memo
```

{% endtab %}

{% tab title="npm" %}

```
npm install --save @corets/memo
```

{% endtab %}
{% endtabs %}

## \<Memo /> <a href="#memo-1" id="memo-1"></a>

Memoizes children components to prevent unnecessary re-renders. Children get re-rendered only when one of the fields passed into the `deps` array changes, very similar to how `useEffect`, `useMemo` and `useCallback` work. You can also display the render count for debugging purposes by setting the `showRenders` property to `true`.

```typescript
import React, { useState } from "react"
import { Memo } from "@corets/memo"

const Example = () => {
  const [a, setA] = useState(0)
  const [b, setB] = useState(0)
  const incrementFirstValue = () => setA(a + 1)
  const incrementSecondValue  = () => setB(b + 1)
  
  return (
    <div>
      <div>A: {a}</div>
      <div>B: {b}</div>
      
      <Memo deps={[b]} showRenders>
        <div>Memo: will only re-render when <code>b</code> changes</div>
        <div>A: {a}</div>
        <div>B: {b}</div>
      </Memo>
      
      <button onClick={incrementFirstValue}>Increment A</button>
      <button onClick={incrementSecondValue}>Increment B</button>
    </div>
  )
}
```