# shallow-element-equals

> Efficient shallow equality algorithm that also allows checks for react element equality of children props

Latest version **1.0.1** (published 2016-10-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install shallow-element-equals
pnpm add shallow-element-equals
yarn add shallow-element-equals
bun add shallow-element-equals
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2016-10-16 |
| First published | 2016-10-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Leland Richardson |
| Maintainers | intelligibabble |
| Keywords | react, react-native, shouldComponentUpdate, shallowCompare, react-addons, performance, shallow-equal |

## Links

- npm: https://www.npmjs.com/package/shallow-element-equals
- Repository: https://github.com/lelandrichardson/shallow-element-equals
- Homepage: https://github.com/lelandrichardson/shallow-element-equals#readme
- Issues: https://github.com/lelandrichardson/shallow-element-equals/issues
- npm.io page: https://npm.io/package/shallow-element-equals

## Dependencies (1)

- [style-equal](https://npm.io/package/style-equal.md) ^1.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2016-10-16
- 1.0.0 — 2016-10-04

## README

# shallow-element-equals

Efficient shallow equality algorithm that also allows checks for react element equality of children props

## Why

`shouldComponentUpdate` is a powerful way to improve performance of react and react native applications,
but often you have components which you can expect to be "pure", but you also want them to have an API
that accepts children.

Having a `children` prop pretty much removes any chance of using a "shallow" equality comparison of props,
since `React.createElement` will return a new object reference on every call, so JSX elements are always
new object references.

`shallowElementEquals` takes this into account, and treats `children` props in a special way such that it will
assume that all of the children elements provided to a component are "pure" as well, and just the props/types
could be compared for an optimized comparison.

## Be careful using this

This is dangerous. Don't use this function if you don't understand its consequences.  By having a component adopt
a `shouldComponentUpdate` method like this, you are assuming something about the components that people are 
passing into your component as children that may not be true (ie, that they are pure). If this is not true,
the consumers of your component may have their application behave in ways that they do not expect, and the
reason will be completely opaque to them.

I would probably not recommend using this type of an optimization on public code or open source projects where
lots of people will be using it without understanding these assumptions.


## Installation

```bash
npm i shallow-element-equals --save
```


## Usage

```js
import shallowElementEquals from 'shallow-element-equals';

// ...

shouldComponentUpdate(nextProps) {
  return !shallowElementEquals(this.props, nextProps);
}
```


## Examples of how this works

See the [tests](test/shallowElementEquals-test.js) to understand better what this will match on.

---
_Source: https://npm.io/package/shallow-element-equals · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._