Uma função que não é permitida executar dentro de um contexto reativo foi chamada de dentro de um contexto reativo.
Por exemplo, um effect não pode ser agendado de dentro de um computed ou de um effect em execução ativa.
Evite chamar funções como effect como parte de expressões de template, pois elas executam em seu próprio contexto reativo.
Expressões computed são esperadas serem puras.
Puro significa que a expressão não dispara nenhum efeito colateral.
Efeitos colaterais são operações como agendar afterNextRender/afterEveryRender, criar um novo effect, ou fazer subscribe em observables.
Algumas operações são explicitamente proibidas dentro de contextos reativos para evitar armadilhas comuns.
Como exemplo, usar afterNextRender/afterEveryRender dentro de um computed irá agendar novos render hooks toda vez que a expressão computed for avaliada.
Isso provavelmente não é intencional e pode degradar a performance da aplicação.
Corrigindo o erro
Este guia de erro não é exaustivo. Ele captura alguns cenários comuns e como resolver o erro.
afterNextRender/afterEveryRender
Mova a chamada para afterNextRender/afterEveryRender para fora do contexto reativo.
Um bom lugar para agendar o after render hook é no construtor da classe do component.
Alternativamente, use untracked para sair do contexto reativo e explicitamente desativar este erro.
effect
Mova a chamada para effect para fora do contexto reativo.
Um bom lugar para agendar um effect é no construtor da classe de um @Component.
toSignal
Mova a chamada para toSignal para fora do contexto reativo.
result = computed(() => { const dataSignal = toSignal(dataObservable$); return doSomething(dataSignal());});pode ser refatorado em:
Alternativamente, se isso não for possível, considere fazer subscribe manualmente ao observable.
Como último recurso, use untracked para sair do contexto reativo.
Tenha cuidado, pois sair do contexto reativo pode resultar em leituras de signal serem ignoradas dentro de untracked.
@debugging
A mensagem de erro menciona a função que foi inesperadamente chamada. Procure por esta chamada de função no código da sua aplicação.
Alternativamente, o stack trace no seu browser mostrará onde a função foi invocada e onde ela está localizada.