bramus / bramus/style-observer
How to ensure the callback only executes when the watched value(s) change(s)?
- Dominant language
- TypeScript
- Stars
- 478
- Forks
- 6
- PR merge metrics
- No merged PRs in 30d
Description
First of all, thank you so much for this library. 🤩 👏
But is it by design that the callback is called not just when one of the specified properties change, but also when the observer is initially attached to an element? If so, is there any way around that?
My use case is a React component that changes the state of one of its ancestors via context when a custom property changes inside it, but because the callback is called initially as well, it causes an infinite render loop.
[Simple reproduction in CodeSandbox](https://codesandbox.io/p/sandbox/jnvj23) (basically the same example you have in the README but in a React/TS project because I had errors when trying in a vanilla JS project for some reason; see how `values` is logged on load)
Contributor guide
No contributing guide indexed for this repository
Research direction
Read the observer example in the README, then run the linked CodeSandbox reproduction to confirm that the callback fires during initial attachment. Determine how the observer should behave when watched values have not changed, and verify that the React component no longer enters an initial render loop while callbacks still run after a watched custom property changes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100