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
- 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 (about 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
[](https://travis-ci.org/aleksashyn/with-memo)
[](https://codecov.io/gh/aleksashyn/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`.