benjamn / benjamn/wryware

Proposal: @wry/equality and handling react / preact specific code

Open
#161 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.