bramus / bramus/style-observer

How to ensure the callback only executes when the watched value(s) change(s)?

Open
#12 4 comments 0 reactions 0 assignees View on GitHub
enhancement has workaround
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.