bitovi / bitovi/react-to-web-component

Component doesn't update when string props changes to unvalid value

Open
#230 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
944
Forks
52
PR merge metrics
No merged PRs in 30d

Description

I am using `@r2wc/react-to-web-component` to wrap a React component as a Microfrontend. I've encountered an issue where removing an attribute from the Web Component (which signifies `null` or `undefined` in standard HTML/DOM behavior) does not correctly reset the prop in the underlying React component. Instead, the React component often retains the previous "stale" value.

**Expected Behavior:**
When an attribute is removed from the custom element, the wrapped React component should receive `undefined` (or `null`) for that prop and re-render.

**Actual Behavior:**
When the attribute is removed, the React component does not appear to receive an update clearing the value. It retains the last known non-null value, causing the UI to display stale data even though the parent application believes it has cleared the selection.

**Reproduction Steps:**

1. Create a component with a prop `selectedId` that drives some state or side-effect.
2. Wrap it using `r2wc(MyComponent, { props: { selectedId: "string" } })`.
3. Render the Web Component: ``.
- *Result:* Component renders with ID "123".
4. Remove the `selected-id` attribute via DOM API or parent framework: `element.removeAttribute('selected-id')`.
- *Result:* Component **should** re-render with `selectedId={undefined}`, but it often stays as "123".

**Our Current Workaround:**

We had to implement an "Explicit String Contract" where we force the attribute to exist by passing the string literal `'null'` instead of removing the attribute.

**Consumer side:**
```javascript
// Instead of passing undefined/null (which removes the attribute)
// We pass a string 'null'

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the issue with r2wc and a selectedId string prop, then trace the custom element's attribute-to-prop update path when selected-id is removed. Done means removing the attribute passes undefined or null to the React component and causes it to re-render without the stale value.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.