{"record":{"id":"ec8097ab88b850da","repo":"oxc-project/oxc","slug":"unexpected-side-effect-in-computed-function","errorCode":null,"errorMessage":"Unexpected side effect in computed function.","messagePattern":"Unexpected side effect in computed function\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/vue/no_side_effects_in_computed_properties.rs","lineNumber":25,"sourceCode":"use oxc_span::{GetSpan, Span};\n\nuse crate::{\n    AstNode,\n    context::LintContext,\n    frameworks::FrameworkOptions,\n    rule::Rule,\n    utils::{\n        ComputedContext, find_computed_context, is_this_object, is_vue_component_options_object,\n    },\n};\n\nfn unexpected_side_effect_in_property(span: Span, key: &str) -> OxcDiagnostic {\n    OxcDiagnostic::warn(format!(\"Unexpected side effect in \\\"{key}\\\" computed property.\"))\n        .with_label(span)\n}\n\nfn unexpected_side_effect_in_function(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Unexpected side effect in computed function.\").with_label(span)\n}\n\n#[derive(Debug, Default, Clone)]\npub struct NoSideEffectsInComputedProperties;\n\ndeclare_oxc_lint!(\n    /// ### What it does\n    ///\n    /// Disallow side effects in computed properties.\n    ///\n    /// ### Why is this bad?\n    ///\n    /// It is considered a very bad practice to introduce side effects inside computed properties.\n    /// It makes the code unpredictable and hard to understand.\n    ///\n    /// ### Examples\n    ///\n    /// Examples of **incorrect** code for this rule:","sourceCodeStart":7,"sourceCodeEnd":43,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/vue/no_side_effects_in_computed_properties.rs#L7-L43","documentation":"The function-form diagnostic of vue/no-side-effects-in-computed-properties: 'Unexpected side effect in computed function.' It covers computed values that are plain functions without a named key to report — e.g. computed functions in `setup()` or standalone computed contexts — where the rule still detects a mutating statement inside the body. Same failure mode as the named variant: computeds are cached and re-run on dependency change, so side effects there trigger redundant renders or infinite loops.","triggerScenarios":"A computed function (setup-style or unnamed in the detected computed context) containing an assignment or external mutation, e.g. `const total = computed(() => { state.lastTotal = ...; return ... })`.","commonSituations":"Composition-API refactors where former methods became computed; logging/counters written into reactive state inside computed; syncing two pieces of state by writing one from inside a computed of the other.","solutions":["Keep the computed body pure — only read reactive state and return a value.","Move writes into `watch`/`watchEffect` callbacks or explicit methods triggered by user events.","If two pieces of state must stay in sync, derive one from the other instead of writing inside a computed.","Re-run oxlint to confirm."],"exampleFix":"// before\nconst total = computed(() => {\n  state.count += 1; // side effect in computed function\n  return state.items.length;\n});\n\n// after\nconst total = computed(() => state.items.length);\nwatch(total, (t) => { state.count = t; });","handlingStrategy":"validation","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":["Treat any assignment inside computed()/computed({}) bodies as a bug by convention.","Sync state with watch/watchEffect, not from inside computed functions.","In composition-API refactors, double-check that former methods did not become impure computeds."],"tags":["vue","computed","lint","side-effects","composition-api"],"backgroundTag":"side-effects-in-computed","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}