This article is translated from 5 Recommended Tools for Optimizing Performance in ReactJS by Chidume Nnamdi with major revision.

Profiler

IO /s/react-pro… Online editing effects.

Profiler is a component in React developed by B. Vaughn that measures how often React applications render and how much time resources are spent rendering. The Profiler provides a function called onRender that receives some time indicators when a component is mounted or updated. Use these time metrics to find inefficient code.

import React, { Profiler } from 'react'; . <Profiler id="Counter1" onRender={this.callback1(this)} ><Counter1 />
</Profiler>
Copy the code

The id is used to identify the corresponding Profiler component. The onRender function is executed when the component is mounted or updated. Its argument structure is as follows:

function onRenderCallback(id, phase, actualDuration, baseDuration, startTime, commitTime,) {
  console.log('onRenderCallback', {
    id,
    phase,
    actualDuration, 
    baseDuration,
    startTime,
    commitTime,
  })
}
Copy the code
  • idComponent id;
  • phaseMount or update during execution;
  • actualDurationThe amount of time it takes the Profiler and subcomponents to render the current update, which is larger at the first mount than at the update stage;
  • baseDurationThe duration of the last rendering of the child component
  • startTimeStart rendering the timestamp of the current update
  • commitTimeReact submits the timestamp of the current update

This data can help us analyze how efficiently components are running and find performance bottlenecks.

React Developer tools

React Developer Tools is a powerful browser plug-in released by the React team. I’ll introduce the Highlight Update feature. This tool is very effective for detecting component repeat rendering. He can use different colors to indicate the border of the component, the yellower the color, the more times the component is repeatedly rendered.

If you have a component tree like this:

If the Main component is rendered repeatedly, a border that wraps the Counter and Count components will appear to indicate repeated rendering.

After we activate this feature, we will open and close the menu on the right side of the ReactJS official website.

How do I activate this feature? Go to the Components bar of the debug tool, click on the pinion in the upper right corner, and then select Highlight Updates when Components Render in the popover.

The type of border depends on the degree of repeat rendering, the more repeat rendering, the darker the color.

Green - low frequency time update | | red - blue - general frequency update v high frequency of updatesCopy the code

Using this tool, we can easily find components with performance problems by border color and optimize them accordingly.

why-did-you-render

Github.com/welldone-so… This tool was developed by Welldone Software to give feedback on repeated rendering of components.

It diff the props of the component. If the component is re-rendered, but the props didn’t change, it will tell you at the command line that the props didn’t change.

Repeat rendering may not matter in small applications, but it will certainly matter in large projects.

This tool is embedded in the React component lifecycle, so it can check whether the props have changed when the component is re-rendered.

Use method is very simple, install first

npm install @welldone-software/why-did-you-render --save
Copy the code

Then register once:

whyDidYouRender(React, {
  trackAllPureComponents: true
});
Copy the code

Then for the class Component:

class Counter extends React.Component {
  static whyDidYouRender = true;
  render() {
   / /...}}Copy the code

For function components:

function Counter() {
  return(
   // ...
  )
}
Counter.whyDidYouRender = true;
Copy the code

Here is a complete example. Every time setState is set, style={{width: “100%”}} is a new value, so the alignment is triggered.

import React from "react";
import "./styles.css";
const whyDidYouRender = require("@welldone-software/why-did-you-render");
whyDidYouRender(React, {
  trackAllPureComponents: true
});
export default class App extends React.Component {
  constructor() {
    super(a);this.state = {
      count: 1
    };
  }
  render() {
    return (
      <div className="App">
        <button onClick={()= > this.setState({ count: this.state.count + 1 })}>
          add
        </button>
        <p>{this.state.count}</p>
        <Comp style={{ width: "100%" }} />
      </div>
    );
  }
}
function Comp(props) {
  return <div>100</div>;
}
Comp.whyDidYouRender = true;
Copy the code

To Code the SandBox test codesandbox. IO/s/distracte… .

Performance timeline (Browser profiling)

The Performance debugging tool is provided by Chrome. It is displayed in the Performance column.

It’s very effective at looking at heavily duplicated components, and it’s also very easy to look at unnecessary UI updates and how often they occur.

Start your React app in development mode before using the tools.

Then, open the developer tools and switch to the Performance panel.

Click on the middle dot or use the command + E shortcut to start recording the developer tool, and then you can do some interactive actions in your application.

It is recommended to record more than 20 seconds, when the time is up, click stop in the middle, or the red dot in the upper left corner.

And then we can see the timeline.

We can swipe to select an area and zoom in by W or zoom out by S. Select an area and press the W key to zoom in.

Each orange bar represents an execution process, where you can see the component name, the phase of execution of the component, and the execution time. In the above picture, the execution phase of App is update phase, which indicates that the App component is performing update operation during this period, and the execution time is 1.71 ms.

A new yellow bar is generated every time a component is rendered. If a component is rendered multiple times, this Timings diagram makes it easier to trace the cause. The length of each yellow bar indicates the execution time of the component. The longer the yellow bar, the longer the execution time. You can use this tool to diagnose pages.

If you think the article is good, please click a like 👍, if you have doubts, you can ask questions in the comment section, creation is not easy, your like and comment is the biggest encouragement to me ~~

Welcome to follow the public account Yunying Sky, share not only technology, but also growth ~~

Magic data is hiring

Sensorsdata.cn is hiring

The company in Beijing, Shanghai, Wuhan, Chengdu, Hefei, Shenzhen recruitment, preferential treatment ~

Snacks, fat house happy water, free lunch dinner, free bus after work in the evening…

Sensors Data, affiliated to Sensors Network Technology (Beijing) Co., LTD., is a professional big Data analysis platform service provider dedicated to helping customers achieve data-driven. Focusing on user-level big data analysis and management needs, the company has launched shence analysis, Shence intelligent operation, Shence intelligent recommendation, Shence user portrait, Shence guest view and other products.

At present, God policy has accumulated mail in China unionpay, China telecom, millet, consumer finance, haitong securities, wide hair negotiable securities, Orient securities, central Banks, baixin, cyts Tours, ping an life insurance pay, sichuan airlines, wing, good future, VIPKID, China resources, there are great, the people net, lala, flash, and the ass mother, Keep, 36 kr, pull hook, VUE, spring rain doctors , Jumei Youpin, Laowugou, Funenjoy, Mombang and other more than 1000 paid enterprise user services and customer successful experience, to provide customers with comprehensive indicators sorting, data model building and other professional consulting, implementation and technical support services.

Founding team

Sang Wenfeng, founder and CEO: Worked in Baidu for 8 years, and built baidu user log big data platform. He served successively as software engineer, senior software engineer, project manager, senior project manager and technical manager. In 2015, he resigned to create Shence Data, launched user behavior analysis product Shence analysis for enterprise users, and helped enterprises realize data-driven.

Cao Jinshi, Co-founder and CTO: Graduated from Tsinghua University with a master’s degree in computer science, worked in Baidu Big Data Department from 2008 to 2014 as the technical director of Baidu User Data Warehouse (BUDW), and became the co-founder of Shence Data and CTO of Shence Data in April 2015.

Co-founder and COO Yaozhou Liu holds a Master’s degree in Computer Application technology from China University of Geosciences. He used to work for Sina, Alibaba, Baidu and other companies. In April 2015, he left Baidu and founded Shence Data as co-founder and COO.

Li Li fu, co-founder and VP of Technology, graduated from Beijing Institute of Technology and majored in software engineering. From 2008 to 2013, he successively worked as an engineer in Baidu’s New product R&D Department, web search department and Infrastructure Department. He is currently the co-founder and VP of Technology of Shence Data.

Financing calendar

  • The company was established in 2015 with angel round financing of RMB 600W
  • In 2016, we obtained A round of financing of $400W
  • In 2017, it obtained the B round financing of usd 1100W
  • In 2018, it obtained the C round financing of usd 4,400,000.00
  • In May 2020, the company obtained the C+ round financing of usd 3000W

Sequoia Capital, Warburg Pincus, DCM China, Xianghe Capital continue to invest, the company has technical challenges, the treatment is very good, we sincerely invite you to join us ~~

Club for JD

Front-end R&D, Front-end architect (Beijing, Chengdu, Wuhan)

Job Responsibilities:

  • Responsible for Web front-end research and development of data visualization analysis business;
  • Work with the product designer to optimize the entire product usage process to provide better data visualization for users;
  • Responsible for the exploration and practice of front-end new technology;

Our challenge:

  • Single-page complex Web applications need to manage 100,000 lines of business code, and the number of code is still growing rapidly.
  • Working with large amounts of data requires a deep understanding of the data business;
  • Serve a large number of customers, product rapid iteration at the same time, to let the system on a healthy track development;

Requirements for engineers:

  • Proficient in HTML/CSS/JavaScript and other front-end basic technologies;
  • Can write high quality code, have good code style, understand various design patterns;
  • React/Vue/Angular stack Know at least one of them. You should understand the design ideas behind them and have no difficulty reading the source code.
  • 100,000 lines of code running in the browser, performance is a challenge, how to analyze and optimize performance should have a certain understanding;
  • Good business understanding, working with big data, requires understanding more than just what UI components are on the page;
  • Experience in visualization is preferred (master Canvas/SVG/WebGL and other Web rendering technologies and standards, familiar with D3, ECharts, Highcharts, AntV, THREEJS and other open source libraries)

Java R&D Engineer, Java Architect (Beijing, Wuhan)

Job Responsibilities:

  • Responsible for the architecture design and development of the Web backend of Shence big data products;
  • Maintain and upgrade existing technical framework to ensure system stability and performance;
  • Understand the business requirements of big data analysis products and be responsible for the technical development of new functions;
  • As a team member, I participated in the technical research and technical breakthrough in the direction of big data import, storage and query;

Job Requirements:

  • Bachelor degree or above in computer science or related field;
  • Proficient in Java language, with a solid foundation of computer technology and good programming habits;
  • Familiar with Spring/MyBatis Netty/Nginx Web open source technology and framework;
  • Proficient in database design (MySQL preferred), excellent SQL writing and tuning ability, familiar with common NoSQL storage, such as Hbase/Kudu/Redis/Mongodb, etc.
  • Knowledge of open source big data technologies such as Hadoop/Hive/Spark/Impala is a plus;
  • Good at learning new knowledge, strong initiative;
  • Good team work spirit, strong communication skills;

Recommendation System R&D Engineer, Expert (Beijing)

Job Responsibilities:

  • Responsible for the design and implementation of mass recommendation system and machine learning-related system;
  • Design and implement highly available, scalable, high-performance storage and computing systems:

Job Requirements:

  • Proficient in Python, C++, Java, data structure, algorithm basis;
  • Solid basic knowledge of computer, familiar with Linux development environment, operating system principle, strong interest in distributed system;
  • Ability to quickly understand business scenarios and abstract general solutions from specific problems;
  • Familiar with machine learning, natural language processing and other algorithms;
  • Experience in recommendation system, search engine, computational advertising system is preferred;
  • Practical working experience in large-scale distributed system is preferred.
  • Hadoop related system use and development experience is preferred;

Test development Engineer (Beijing, Wuhan, Hefei)(Hefei is ios Android SDK testing)

Job Responsibilities:

  • Responsible for the test and development of data application products, cooperate with product manager and R&D team to deliver high quality products;
  • Follow up, analyze and report product quality problems, and promote timely and reasonable solution of problems found in testing;
  • Improve the discovery mechanism of quality problems in the research and development process, improve the testing efficiency;

Job Requirements:

  • 1. Bachelor degree or above, major in computer related;
  • At least 3 years system level testing experience in large projects, familiar with software development process;
  • Familiar with at least one BUG tracking and continuous integration tool.
  • Familiar with front-end test automation framework, front-end test automation experience is preferred;
  • Familiar with at least one scripting language such as Python, shell, Java, etc.
  • Strong business analysis ability, good communication, expression and comprehensive coordination ability;
  • Proactive, responsible, quick learning ability, interested in big data.

Operation and Maintenance Engineer, Architect (Beijing, Hefei)

Job Responsibilities:

  • Responsible for strategic analysis of SaaS cluster environment operation and maintenance;
  • Responsible for the product installation, operation and maintenance of the private deployment environment;
  • Participate in product installation procedures and o&M system improvement;
  • Provide other technical support related to operation and maintenance to customers;

Job Requirements:

  • 1. Bachelor degree or above, major in computer related;
  • At least 2 years operation and maintenance experience in Internet industry;
  • Familiar with Linux system, Hadoop and other distributed system operation and maintenance experience;
  • Familiar with at least one scripting language such as Shell and Python.
  • Good language skills and customer communication skills, strong pressure tolerance;

Ios, Android, Web JS SDK R&d Engineer (Hefei)

Job Responsibilities:

  • Responsible for the design, development and optimization of SHENce SDK.

Job Requirements:

  • 1. Bachelor degree or above, major in computer science or related;
  • 3 years or above related platform development experience (ios, Android, Web);

ios sdk

  • IOS SDK proficient in object-C, RunTime and other IOS mainstream development technologies;
  • Familiar with the features of different iOS versions;
  • Proficient in multithreading and network programming, have more engineering experience in high-performance programming and architecture;
  • Strong ability to analyze and solve problems;
  • Good team work, communication and learning skills, sense of responsibility.

android sdk

  • Have a solid Java language foundation, proficient in Android architecture, familiar with the Framework layer;
  • Proficient in multithreading and network programming, have more engineering experience in high-performance programming and architecture;
  • Have complete experience in Android projects;

web js sdk

  • Responsible for the investigation, development, maintenance and customer support of SHENce front-end SDK;
  • Front-end SDK includes Web, wechat applets, Alipay applets, other applets, quick applications, etc.
  • Proficient and comprehensive mastery of JavaScript basic knowledge and technical details, such as scope, Cookie, etc.
  • Keep an eye on cutting-edge JS technologies, including ES6, React, Vue, etc.

Product Designer (Beijing)

Job Description:

  • Responsible for the interface design of Shence data series products;
  • Find appropriate design solutions according to product requirements, output interaction and UI details;
  • Responsible for the effect and user experience after launch, and promote continuous product improvement;
  • Work closely with product manager and engineer to achieve goals;

Job Requirements:

  • At least 2 years design experience, have complete PC and mobile product design experience;
  • Experience in b-end design is preferred.
  • Excellent visual and interactive design skills, master design tools, attach importance to design details and have a sense of the whole;
  • Strong logical thinking and communication skills, accurately understand information, clearly express ideas, and build consensus in team work;
  • Excellent learning ability, self-driven, efficient, curious, not self-limiting;
  • Provide a complete portfolio;

Product Manager, Product Leader(Beijing)

Job Responsibilities:

  • Responsible for customer behavior analysis product line requirements analysis, design, delivery;
  • Responsible for the effect after launch, promote the continuous improvement of products;
  • Participate in the exploration and validation of intelligent marketing, labels, portraits, recommendations, posters and other products.

Job Requirements:

  • At least 3 years product experience, data product experience;
  • Excellent product requirement design ability, can produce high quality prototype and document, love data analysis field;
  • System thinking, self-driven, iterative thinking, data product insight and practice;
  • Science and engineering background in computer science, mathematics is preferred.

Data Analyst (Beijing, Shanghai, Shenzhen)

Job Responsibilities:

  • Assist customers to sort out data application requirements, guide customers to complete the construction of multi-dimensional index system based on customer business demand scenarios, and assist customers to complete the whole process of data collection, analysis and application on the Shence data platform;
  • To solve customer business problems as the goal, combined with industry experience and methodology, provide consulting services and thematic analysis reports;
  • Sorting out successful cases of customers, forming industry solutions and depositing knowledge base of various business fields;
  • Cooperate with product department and technical department to produce product improvement demand based on project practice and promote continuous optimization and improvement of products;

Job Requirements:

  • At least 2 years data association working experience in Internet or consulting industry, data product, data analysis, data operation is preferred;
  • Familiar with the overall data platform construction, visual data or marketing platform construction experience is preferred;
  • Proficient in using statistical analysis tools, logical and rigorous, able to analyze and solve problems independently;
  • Excellent communication and service awareness, good on-site presentation skills, able to independently take charge of and promote projects;
  • Strong learning ability and self-driven consciousness, able to find and solve problems;
  • Interested in big data industry;

The school recruit JD

Front End Engineer (Beijing)

Job Responsibilities:

  • Responsible for Web front-end development of Core data products of Shence
  • Work with product designers to optimize the entire product usage process and provide better data visualization for users
  • Work with team members to explore and practice new front-end technologies

Job Requirements:

  • Bachelor degree or above in computer science or related field
  • Familiar with HTML/CSS/JavaScript and other front-end related technologies, familiar with cutting-edge JS technologies, including ES6, React, Vue and so on
  • Besides writing code, I can skillfully use various engineering tools to deal with, and I should have some understanding of the working principle behind tools
  • Interested in big data direction, interested in contact with various Internet products, willing to cultivate their own product awareness
  • Quick learning ability and initiative

Back-end R&D Engineer (Beijing)

Job Responsibilities:

  • Responsible for back-end research and development of big data products;
  • Responsible for the specific development and maintenance of storage, query, import and other related modules;
  • Improve the overall operation efficiency and stability of products.

Job Requirements:

  • 1. Bachelor degree or above, major in computer related;
  • Interested in big data direction, willing to help customers achieve data-driven;
  • Solid basic knowledge of computer, familiar with mainstream development language and operating system principle, strong interest in distributed system;
  • Interested in contact with various Internet products, willing to develop their own product awareness;
  • Quick learning ability; Strong initiative.

Machine Learning Algorithm Engineer (Beijing)

Job Responsibilities:

  • Analyze business problems of finance, news, short video and other Internet industries, investigate machine learning algorithms suitable for customer needs, and determine evaluation objectives;
  • Process business data, complete offline and online feature engineering;
  • Responsible for machine learning algorithm development and tuning;

Job Requirements:

  • 1. Bachelor degree or above, major in computer science is preferred;
  • Familiar with data mining, machine learning and other related knowledge;
  • Able to quickly learn and develop machine learning algorithms suitable for various business scenarios;
  • Quick learning ability; Strong initiative.

Throw in your resume

Sensors Data – Bring value to customers

Resume: [email protected]