What is the most efficient way to retrieve and update a Stencil component parameter without triggering a rerender of the component?

Within my Stencil component, there exists a not-Prop member variable known as private _zIndex. The value of this variable can be adjusted via a method call like 

Method() setZIndex( zIndex : number );
, or it may change internally during the component's operations. I'm in need of a way to access the current value of this variable externally. My attempt was to create a method that simply return this._zIndex. However, this method needs to be asynchronous due to a warning:

The external @Method() getZIndex() should return a Promise or void.  
Consider prefixing the method with async,  Next minor release will error.

I prefer not to make the getZIndex() function asynchronous, so another approach is to define a 

Prop( { mutable: true } ) _zIndex
. This allows me to set and retrieve the variable's value, but the downside is that each time the variable is updated, it triggers a re-render of the stencil component. Given the size of my component and its complex structure, this process becomes slow.

My query is whether there are alternative methods available:

  • To extract the private variable's value externally without introducing an asynchronous operation?

or

  • To configure a Prop in a way that prevents a re-render when its value is modified?
typescriptasynchronouspropstenciljs

Answer №1

1 - Stencil @Method functions are designed to function asynchronously. The reasoning behind this choice can be found here:

2 - If you need to control when a component is re-rendered, you can utilize the componentWillUpdate() lifecycle method:

To avoid triggering a re-render based on changes in _zIndex, it's important to store the previous value and compare it with the current value:

componentWillUpdate() {
  if (this._zIndex !== this.cachedZindex) {
    return false;
  }
  return true;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using the Vue.js Compositions API to handle multiple API requests with a promise when the component is mounted

I have a task that requires me to make requests to 4 different places in the onmounted function using the composition api. I want to send these requests simultaneously with promises for better performance. Can anyone guide me on how to achieve this effic ...

javascripttypescriptvue.js

The Gulp task is stuck in an endless cycle

I've set up a gulp task to copy all HTML files from a source folder to a destination folder. HTML Gulp Task var gulp = require('gulp'); module.exports = function() { return gulp.src('./client2/angularts/**/*.html') .pipe( ...

javascriptnode.jstypescriptgulpgulp-watch

What could be causing my TypeScript object to appear as "undefined" when I try to log it?

I created a StackBlitz demo featuring a button that, when clicked, should pass a value to the controller. In the controller, there is a function designed to assign this value to an object. However, TypeScript seems to be indicating that the object is undef ...

angulartypescript

Lexicaljs utilizes debounce to receive editor state JSON and text content in a React project

What I Need I am looking to retrieve the editor state in JSON format, along with the text content of the editor. Moreover, I prefer to receive these values in a debounced manner, as described here. The reason I want to obtain the values in a debounced wa ...

reactjstypescriptlexicaljs

What is the process for overriding the module declaration for `*.svg` in Next.js?

The recent modification in Next.js (v11.0.x) has introduced new type definitions: For next-env.d.ts (regenerated at every build and not modifiable): /// <reference types="next" /> /// <reference types="next/types/global" /> ...

reactjstypescriptnext.jsnextjs-image

Tips for creating an Angular component that can receive a single value from a choice of two different lists

My angular component requires a value that belongs to one of two lists. For example: @Input() public type!: enumA | enumB; However, this setup becomes problematic when the enums share values or are linked together in a way I find undesirable. I would pre ...

angulartypescriptenumsunion-types

Exploring observables for querying the OMDB API and obtaining information on movies

Hey everyone, I'm currently working on implementing a live search feature using Observables in Angular2 to fetch Movie data from the OMDB API. While I can see that it is functioning correctly in the Chrome Network tab, the results aren't showing ...

angulartypescriptangular2-observables

Typescript is struggling to locate a module that was specified in the "paths" configuration

Within my React project, I have set up a module alias in the webpack config. Now, I am looking to transition to Typescript. // I have tried to simplify the setup as much as possible Here is my tsconfig.json located in the root directory: { "compilerOp ...

javascriptreactjstypescript

Experiencing difficulties with a click event function for displaying or hiding content

Struggling with implementing an onClick function for my two dynamically created components. Currently, when I click on any index in the first component, all content is displayed. What I want is to show only the corresponding index in the second component ...

javascripttypescriptstenciljs

Learn how to automatically access keys in local storage using Angular

I need to implement a way to store data in local storage so that it persists even when the page is refreshed. In my HTML file, there is a button that triggers a function in my TypeScript file. This function takes a parameter 'game', which is an i ...

angulartypescript

The editor is locked and choices are displayed in a vertical orientation

I'm currently experimenting with using draft js in my project to create a wysiwyg editor. However, I've encountered an issue where the editor appears vertically instead of horizontally when I load the component. Any idea why this might be happen ...

javascripttypescriptnext.jsdraftjsreact-draft-wysiwyg

Complicated nestjs application successfully resolves path issue

Currently, I am in the process of creating a boilerplate for NestJS and microservices (still a work in progress). The problem arises when trying to run the app or perform tests, resulting in this https://i.sstatic.net/uj4un.png You can find the code on t ...

node.jstypescriptexpressjestjsnestjs

Refine the search outcomes by specifying a group criteria

I have a scenario where I need to filter out service users from the search list if they are already part of a group in another table. There are two tables that come into play - 'group-user' which contains groupId and serviceUserId, and 'gro ...

javascripthtmlangulartypescript

Converting types to "any" and encountering the error message "There are two distinct types with the same name, but they are not related."

I am encountering some challenges while trying to use an NPM module that I developed along with its Typescript typings in another application. To simplify the examples, I will omit properties that are not relevant to the issue at hand. Within my module&ap ...

node.jstypescriptexpressjoi

The specified object '[object Object]' is not compatible with NgFor, which only supports binding to iterable data types like Arrays

I have some code that is attempting to access objects within objects in a template. <table class="table table-striped"> <tr *ngFor="let response of response"> <td><b>ID</b><br>{{ response.us ...

jsonangulartypescript

What is the best way to convert a tuple containing key/value pairs into an object?

How can the function keyValueArrayToObject be rewritten in order to ensure that the type of keyValueObject is specifically {a: number; b: string}, instead of the current type which is {[k: string]: any}? const arrayOfKeyValue = [ {key: 'a', val ...

typescripttuplestypescript-generics

Strategies for successfully passing and showcasing the result of a calculation on a fresh view or component within Angular

I have developed a basic calculator application with two main components: Calculator and Result. The Angular router is used to navigate between these components. Now, I am looking for a way to dynamically display the calculation result from the Calculator ...

htmlcssangulartypescriptangular-template

How to correctly deserialize dates in Angular 5

When working with Angular 5, I have encountered an issue where JSON data from an API is not properly deserialized into dates within an array. My model includes a definition like this: export interface ProcessDefinition { _id?: string; proces ...

angulartypescripttype-conversionobservable

Learning to implement forwardRef in MenuItem from Material-UI

Encountering an error when pressing Select due to returning MenuItem in Array.map. Code const MenuItems: React.FC<{ items: number[] }> = (props) => { const { items } = props; return ( <> {items.map((i) => { return ( ...

reactjstypescriptmaterial-ui

Issue customizing static method of a subclass from base class

Let me illustrate a simplified example of my current code: enum Type {A, B} class Base<T extends Type> { constructor(public type: T) {} static create<T extends Type>(type: T): Base<T> { return new Base(type); } } class A exte ...

typescriptinheritancestatic