Proposal: @wry/equality and handling react / preact specific code
- Dominant language
- TypeScript
- Stars
- 91
- Forks
- 15
- PR merge metrics
- No merged PRs in 30d
Description
I have a relatively simple proposal, which is handling of equality comparisions for react / preact elements.
I think, more or less, it would look like the code below, (though I would need to do some detection mechanism to figure out if its a react / preact object or not)
```javascript
if (hasElementType && a instanceof Element) {
return false;
}
// this would be the react object
const keys = Object.keys(a);
const length = keys.length;
// custom handling for React/Preact
for (let i = length; i-- !== 0; ) {
if ((keys[i] === '_owner' || keys[i] === '__v' || keys[i] === '__o') && a.$$typeof) {
// React-specific: avoid traversing React elements' _owner
// Preact-specific: avoid traversing Preact elements' __v and __o
// __v = $_original / $_vnode
// __o = $_owner
// These properties contain circular references and are not needed when
// comparing the actual elements (and not their owners)
// .$$typeof and ._store on just reasonable markers of elements
continue;
}
// all other properties should be traversed as usual
if (!equal(a[keys[i]], b[keys[i]])) {
return false;
}
}
```
This would make it safe to use for equality with APIs like `React.memo` and prop comparisions
Contributor guide
No contributing guide indexed for this repository
Research direction
No implementation file or test is named. Start by locating the @wry/equality implementation and its equality traversal, then determine how React and Preact elements are identified without following the circular properties described; done means equality is safe for React.memo and prop comparisons.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100