bitovi / bitovi/react-to-web-component
Component doesn't update when string props changes to unvalid value
- 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