mistakster

Optimizing performance of the React list component

Basically, everything need to be done in shouldComponentUpdate() method.

import React, {Component} from 'react';

class Item extends Component {
  shouldComponentUpdate(nextProps, nextState) {
 // always re-render component

mistakster

import { useState } from 'react';

// 1) The following code is not optimal in terms
// of performance. Could you improve it?
const Page = () => {
  const [value, setValue] = useState(0);

  return (
    <Counter
      value={value}

mistakster

(function () {
  const dateFormat = d3.time.format('%Y-%m');

  // produce mock data
  function generateData() {
    const generator = new MersenneTwister(123456);
    const startDate = +new Date('2016-01-01');
    const endDate = +new Date('2017-01-01');

    return _.range(100)

mistakster

/**
 * The memory usage logger for a Node.js process
 * 
 * Resident Set Size (RSS) is the amount of space occupied in the main memory
 * device for the process, which includes the heap, code segment and stack.
 * Variables are stored in the stack and the actual JavaScript code resides in the code segment.
 *
 * The heap is where objects, strings, and closures are stored.
 *
 * @see https://nodejs.org/api/process.html#process_process_memoryusage

mistakster

This code requires:

1. Node.js
2. Python 2.7.x
3. Java Runtime Environment
4. mocha
5. selenium-webdriver
6. Selenium server
7. DriverProvider

mistakster

/**
 * Build for production:
 * $ NODE_ENV=production webpack
 * 
 * Build for staging or development mode
 * $ webpack
 * 
 * Run app server in dev mode and use Hot Module Replacement
 * $ NODE_ENV=webpack nodemon --watch ./app index.js
 * 

mistakster

const ENV = process.env.NODE_ENV;

mistakster

function toArray(obj) {
	return [].slice.apply(obj);
}

module.exports = function promisify(fn) {
	return function () {
		const args = toArray(arguments);
		const self = this;

		return new Promise(function (resolve, reject) {

mistakster

const RawSource = require('webpack-sources').RawSource;
const postcss = require('postcss');

const MASK = /\.css$/;

/**
 * @param {Function} options.predicate is a function invoked per CSS file
 * @param {String} options.suffix is a string attached to the new file
 * @param {Array} options.pipeline is a list of PostCSS plugins
 * @param {Object} options.map is a PostCSS source maps configuration

mistakster

// Conver scale factor into pixels
.fontScale(@scale: 0) {
	@list: 14px, 16px, 20px, 24px, 28px, 34px, 41px, 50px, 60px;

  	.test-args(@scale) when (@scale >= -2) and (@scale <= 6) {
		font-size: extract(@list, @scale + 3); 
	}

	.test-args(@scale);
}