An open API service indexing awesome lists of open source software.

https://github.com/aleksashyn/with-memo

HOC for React.memo with in-depth property comparison
https://github.com/aleksashyn/with-memo

deep-equal memo reactjs with-memo

Last synced: about 2 months ago
JSON representation

HOC for React.memo with in-depth property comparison

Awesome Lists containing this project

README

        

# React withMemo

[![Build Status](https://travis-ci.org/aleksashyn/with-memo.svg?branch=master)](https://travis-ci.org/aleksashyn/with-memo)
[![codecov](https://codecov.io/gh/aleksashyn/with-memo/branch/master/graph/badge.svg)](https://codecov.io/gh/aleksashyn/with-memo)
![npm](https://img.shields.io/npm/v/with-memo)
![NPM](https://img.shields.io/npm/l/with-memo)

HOC wrapper around [React.memo](https://reactjs.org/docs/react-api.html#reactmemo) with in-depth property comparison.

## Install

```bash
yarn add with-memo
# or
npm install with-memo --save
```

## Usage

Example:

```tsx
import { FC } from "react";
import withMemo from "with-memo";

const Example: FC<{ name: string; count: number }> = ({ name, count }) => (


{name}
{count}


);

export default withMemo(Example, ["name"]);
```

`with-memo` returns the memoized Component using `React.memo` and uses the function to deeply compare the properties of the Component.

### API documentation

The `withMemo` function is a simple wrapper that needs to compare a specific set of Component's props with a deep comparison.

The `withMemo` function accepts the properties `Component` and `checkedProps`.

```tsx
function withMemo

(Component: FunctionComponent

, checkedProps: ReadonlyArray): NamedExoticComponent


```

#### `checkedProps`
A readonly array with a list of props name to be checked in `React.memo`.

If the array is empty, then all props will be checked.

## TypeScript types

This library is built using TypeScript.

You can find the exported TypeScript definitions in `withMemo.d.ts`.