Skip to content

fix(react): recreate SelectionArea instance when props change#262

Merged
simonwep merged 2 commits into
simonwep:masterfrom
kaigritun:fix/react-prop-updates
Feb 15, 2026
Merged

fix(react): recreate SelectionArea instance when props change#262
simonwep merged 2 commits into
simonwep:masterfrom
kaigritun:fix/react-prop-updates

Conversation

@kaigritun

Copy link
Copy Markdown

Summary

Fixes #226

The React component had an empty dependency array in its useEffect, which meant the component never reacted to prop changes. This is unlike the Vue implementation which uses watchEffect to auto-track dependencies.

Changes

  • Add configuration props (boundaries, document, selectables, startAreas, container, behaviour, features) to the useEffect dependency array
  • Use useRef for callback props to avoid unnecessary instance recreation when only callbacks change
  • Use useMemo with JSON.stringify for object props (behaviour, features) to provide stable dependency comparison
  • Forward remaining HTML attributes to the container div via rest props

Behavior

Before: Changing any prop after initial mount had no effect - the SelectionArea instance was never updated.

After:

  • When configuration props change, the instance is destroyed and recreated (matches Vue behavior)
  • When only callback props change, the callbacks are updated via refs without recreating the instance (performance optimization)

Notes

As mentioned in the issue, the core module doesn't support dynamic option updates, so recreating the instance is the correct approach. This matches the Vue implementation's behavior.

@simonwep

simonwep commented Feb 8, 2026

Copy link
Copy Markdown
Owner

Thank you for this high-quality PR, I'll have a look at it soon! :)

Fixes simonwep#226

The React SelectionArea component had an empty dependency array in its
useEffect, which meant the component never reacted to prop changes. This
is unlike the Vue implementation which uses watchEffect to auto-track
dependencies.

Changes:
- Add configuration props (boundaries, document, selectables, startAreas,
  container, behaviour, features) to the useEffect dependency array
- Use useRef for callback props to avoid unnecessary instance recreation
  when only callbacks change
- Use useMemo with JSON.stringify for object props (behaviour, features)
  to provide stable dependency comparison
- Forward remaining HTML attributes to the container div via rest props
@simonwep simonwep force-pushed the fix/react-prop-updates branch from 1b5f17b to 74a60f7 Compare February 15, 2026 15:31
@simonwep simonwep force-pushed the fix/react-prop-updates branch from 74a60f7 to 4fc6b8b Compare February 15, 2026 15:32
@simonwep simonwep merged commit c4adeaf into simonwep:master Feb 15, 2026
@simonwep

Copy link
Copy Markdown
Owner

I'll have to do some work to be able to release a new version since it's been a while and I have to update all dependencies first... :) Made some minor changes to support preact and fix an issue in how options are resolved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

React package doesn't support changes to props

2 participants