A function that is not allowed to run inside a reactive context was called from within a reactive context.
For example, an effect cannot be scheduled from within a computed or an actively executing effect.
Avoid calling functions like effect as part of template expressions, as those execute in their own reactive context.
Computed expressions are expected to be pure.
Pure means that expression do not trigger any side effects.
Side effects are operations like scheduling afterRender, creating a new effect, or subscribing to observables.
Some operations are explicitly banned inside reactive contexts in order to avoid common pitfalls.
As an example, using afterRender inside a computed will schedule new render hooks every time the computed expression evaluates.
This is likely not intended and could degrade application performance.
Fixing the error
This error guide is non-exhaustive. It captures a few common scenarios and how to address the error.
afterRender
Move the call for afterRender outside of the reactive context.
A good place to schedule the after render hook is in the component's class constructor.
Alternatively, use untracked to leave the reactive context and explicitly opt-out of this error.
effect
Move the call for effect outside of the reactive context.
A good place to schedule an effect is in a @Component's class constructor.
toSignal
Move the call for toSignal outside of the reactive context.
result = computed(() => { const dataSignal = toSignal(dataObservable$); return doSomething(dataSignal());});
can be refactored into:
dataSignal = toSignal(dataObservable$);result = computed(() => doSomething(dataSignal()));
Alternatively, if this is not possible, consider manually subscribing to the observable.
As a last resort, use untracked to leave the reactive context.
Be careful as leaving the reactive context can result in signal reads to be ignored inside untracked.
@debugging
The error message mentions the function that was unexpectedly called. Look for this function call in your application code.
Alternatively, the stack trace in your browser will show where the function was invoked and where it's located.