Changing the component internal state externally.

[vnermolaev]

Hi there!

I’m currently developing a component that maintains an internal state and re-renders itself based on that state. I’d like to use this component as a child of another component, with the ability to instruct the child to update its state and trigger a re-render.

The first solution that comes to mind is passing a signal from the parent to the child. When the signal changes, Dioxus re-renders the child component, where I can update its internal state. However, updating the internal state inside the child component triggers another re-render, creating a circular loop. Dioxus correctly reports this issue with the following warning:

WARN .../.cargo/registry/src/index.crates.io-6f17d22bba15001f/dioxus-signals-0.6.1/src/warnings.rs:62 Write on signal at src/component.rs:125:30 happened while a component was running. Writing to signals during a render can cause infinite rerenders when you read the same signal in the component. Consider writing to the signal in an effect, future, or event handler if possible.

I cannot really use use_effect because "Effects are reactive closures that run after the component has finished rendering." (see docs).
I cannot use use_memo because it computes derived data, while I need to update my internal state.

To break this cycle, my current solution is as follows:

• Use a static global variable to track the last value of the signal.
• When the signal changes:
  • Check if its value is different from the recorded value:
    • If different, update the internal state of the child component and record the new signal value.
    • If the same, ignore the update to prevent redundant changes.
• This ensures the internal state is only updated when the signal value has truly changed, effectively breaking the circular loop.

That said, I’m curious if there’s a more established or idiomatic way to handle this scenario. Is there a best practice for solving this kind of issue in Dioxus?