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: 2 months ago
JSON representation

HOC for React.memo with in-depth property comparison

• Host: GitHub
• URL: https://github.com/aleksashyn/with-memo
• Owner: aleksashyn
• License: mit
• Created: 2020-03-28T19:50:20.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T17:38:34.000Z (over 2 years ago)
• Last Synced: 2025-04-12T23:44:59.628Z (2 months ago)
• Topics: deep-equal, memo, reactjs, with-memo
• Language: TypeScript
• Size: 1.24 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

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`.