Skip to content

Localized tests trigger useComputed$ mutation state warnings #4136

@intellix

Description

@intellix

If you mark a Text field as Localizable and perform an SSR load with sdk-qwik, you'll get a screen full of warnings about mutating state inside useComputed$ and it makes it very hard to read/debug as conosle is just spammed with them.

This line is mutating state and should probably be rewritten to be immutably friendly by returning a new object:

block.component.options = extractLocalizedValues(
block.component.options,
locale ?? 'Default'
);

Warning from 1x localized string:

QWIK WARN State mutation inside useComputed$() is an antipattern. Use useTask$() instead <ref *1> MockElement {
  nodeType: 111,
  _qc_: {
    '$flags$': 12,
    '$id$': '',
    '$element$': [Circular *1],
    '$refMap$': [],
    li: [],
    '$tasks$': [ [Task], [Task] ],
    '$seq$': [ [Object], [SignalImpl] ],
    '$slots$': [],
    '$scopeIds$': null,
    '$appendStyles$': null,
    '$props$': {
      block: [Object],
      '$$linkComponent': [SignalDerived],
      '$$context': [SignalDerived],
      '$$registeredComponents': [SignalDerived],
      [Symbol(IMMUTABLE)]: [Object]
    },
    '$vdom$': null,
    '$componentQrl$': [AsyncFunction: qrl2] {
      getSymbol: [Function: getSymbol],
      getHash: [Function: getHash],
      getCaptured: [Function: getCaptured],
      resolve: [AsyncFunction: resolve],
      '$resolveLazy$': [Function: resolveLazy],
      '$setContainer$': [Function: setContainer],
      '$chunk$': null,
      '$symbol$': 'Block_component_nnPv0RY0U0k',
      '$refSymbol$': null,
      '$hash$': 'nnPv0RY0U0k',
      getFn: [Function: invokeFn],
      '$capture$': null,
      '$captureRef$': [],
      dev: [Object],
      resolved: [Function: Block_component_nnPv0RY0U0k]
    },
    '$contexts$': null,
    '$dynamicSlots$': null,
    '$parentCtx$': {
      '$flags$': 0,
      '$id$': '',
      '$element$': [MockElement],
      '$refMap$': [],
      li: [],
      '$tasks$': null,
      '$seq$': null,
      '$slots$': null,
      '$scopeIds$': null,
      '$appendStyles$': null,
      '$props$': null,
      '$vdom$': null,
      '$componentQrl$': null,
      '$contexts$': null,
      '$dynamicSlots$': null,
      '$parentCtx$': [Object],
      '$realParentCtx$': undefined
    },
    '$realParentCtx$': {
      '$flags$': 4,
      '$id$': 'm',
      '$element$': [MockElement],
      '$refMap$': [],
      li: [],
      '$tasks$': null,
      '$seq$': [Array],
      '$slots$': [],
      '$scopeIds$': null,
      '$appendStyles$': null,
      '$props$': [Object],
      '$vdom$': null,
      '$componentQrl$': [AsyncFunction],
      '$contexts$': null,
      '$dynamicSlots$': null,
      '$parentCtx$': [Object],
      '$realParentCtx$': [Object]
    }
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions