Restricted async operation 'setTimeOut' in LWC

Question

I am getting 'Restricted async operation 'setTimeOut' in LWC' error in VS Code when I use setTimeOut in connectedCallback.

.html file

<template>
<div class="wrapper">
<header class="header" if:true={ready} >Available Bikes for {name}</header>
</div>
</template>

.js file

import { LightningElement, track, wire } from 'lwc';

export default class Selector extends LightningElement {
@track
ready = false;
connectedCallback() {
   setTimeout(() => {
       this.ready = true;
   }, 3000);
} 

What is the alternative to perform any action after certain time in LWC?

Answer 1

Settimeout is generally restricted for LWC as there are other ways to implement the functionality. More information here

If you still need to use you can disable es-linting by adding the below before your settimeout line

// eslint-disable-next-line @lwc/lwc/no-async-operation

renderedCallback() {
   if(!this.ready)
   this.ready == true;
} 

From documentation

Due to mutations, a component is usually rendered many times during its lifespan in an application. To you use this hook to perform a one-time operation, use a private boolean property like hasRendered to track whether renderedCallback() has been executed. The first time renderedCallback() executes, perform the one-time operation and set hasRendered = true. If hasRendered = true, don’t perform the operation.