# Rational use of setData

SetDatais the most frequently used interface in Weixin Mini Program development and the most prone to performance problems.

# 1. Process of setData

The process of setDatacan be roughly divided into several stages:

Logic layer virtual DOM tree traversal and update, trigger component life cycle and observer;
Transferring data from the logical layer to the view layer;
The view layer updates the virtual DOM tree, real DOM elements and triggers page rendering updates.

# 2. data communication

For step 2, because the logic layer and view layer of Weixin Mini Program are two separate runtime environments, belonging to different threads or processes,There is no direct data sharing. Data serialization, data transfer across threads / processes, and data deserialization are required. The data transfer procedure is asynchronous and non-real-time .

On iOS / iPadOS / MacOS, data transfer is achieved byevaluateJavascript, with additional JS script parsing and execution time.

The time spent on data transfer is positively related to the size of the data amount . If the end-to-end thread is busy, the data will wait for in the message queue.

# 3. Use advice

The setData should be used only for render-related data updates. Updating render-independent fields with setData triggers additional rendering processes, or increases the amount of data transferred, affecting rendering time.

✅The data field of the page or component should be used to store the data related to the rendering of the page or component (i.e. the field that appears directly in the wxml);
✅The page or component rendering indirectly related data can be set to " plain data field ," and you can use setData to set and observers to listen for changes;
✅Data that is irrelevant to the page or component rendering should be hung under a field that is not data, such asthis.userData = {userId: 'xxx'};
❌Avoid including in data that does not render business data;
❌Avoid using data for data sharing between page or component approaches ;
❌Avoid misuse of pure data fields to save data that can be saved using non-data fields.

# 3.2 Control the frequency of setData

Each setData triggers a traversal and update of the logical layer virtual DOM tree, which may also result in triggering a full page rendering process.Too frequent (millisecond) calls tosetDatacan have the following consequences:

The logical layer JS thread is busy, unable to respond to the user's operation, and unable to complete the page switch.
The view layer JS thread is always busy, the communication time of logical layer - > view layer increases, the delay of receiving message of view layer is higher, and the rendering appears obvious delay.
The view layer cannot respond to user actions in a timely manner, the user feels noticeably stuck when scrolling the page, the operation feedback is delayed, the user action events cannot be passed to the logic layer in time, and the logic layer cannot pass the operation processing results to the view layer in time.

Therefore, developers should note when calling setData:

✅Call setData only when a page content update is needed;
✅ merge on consecutive setData calls as much as possible;
❌Avoid unnecessary setData;
❌Avoid constant calls to setData at excessive frequency, such as millisecond countdown;
❌Avoid calling setData every time in an onPageScroll callback.

# 3.3 Select the appropriate setData range

A setData of a component only causes updates to the current component and subcomponents, reducing the computational overhead of virtual DOM updates.

✅Page elements that need to be updated frequently (for example, a seconds countdown) can be encapsulated as separate components that perform setData operations within the component.The CSS contain attribute can be used to limit the scope of calculations for layout, styles, and rendering, etc., if necessary.

# 3.4 SetData should only pass data that has changed

The amount of setData will affect the time of data copy and data communication, increase the cost of page update, and cause page update delay.

✅The setData should be passed in only the fields that have changed;
✅It is recommended to change an attribute of an array or object in the form of data path , such asthis.setData ({'array'[2].Message ':' newVal ',' a.b.c.d ':' newVal '}), rather than updating the entire object or array every time;
❌Don't be lazy in setData:this.setData (this.data).

# 3.5 Control the setData of the background page

Because the Weixin Mini Program logic layer is run in a single thread, the background page tosetDataalso takes up the running resources of the background page, and the rendering of the background pages is unperceived by the user, resulting in waste. On some platforms, each WebView in the Mini Program rendering layer also shares the same thread, and the rendering and logical execution of the background page will also cause the front page to stutter.

✅The update operation after the page cutting background should be avoided as much as possible, or delayed until the pageonShowis delayed;
❌Avoid high-frequency setData, such as countdown updates, after cutting the background.

# 4. Performance Analysis

Developers can access updated performance statistics through the component's setUpdatePerformanceListener interface to analyze components that create performance bottlenecks.