ra-kesh

React Performance

Notes From Steve Kinney's "React Performance" Frontend Masters Course

General

re: optimizations: "Start with a problem first, then solve it. dont go looking for problems."

"measure first before you optimize for performance. And then measure again."

ra-kesh

import type { ComponentType } from "react"
import styled from "@emotion/styled"

const GradientBlur = styled.div`      
    user-select: none;
    pointer-events: none;
  
    position: fixed;
    top: 0px;
    left: 0px;

ra-kesh

function walkDOMTree(
  root,
  whatToShow = NodeFilter.SHOW_ALL,
  { inspect, collect, callback } = {}
) {
  const walker = document.createTreeWalker(root, whatToShow, {
    acceptNode(node) {
      if (inspect && !inspect(node)) {
        return NodeFilter.FILTER_REJECT;
      }

ra-kesh

• Relational Databases
  • Creating, Altering, Dropping Tables
    • Primary and Secondary Keys
    • Adding Relationships Between Two Tables using Foreign Key
    • UNIQUE, DEFAULT, NOT NULL constraints
  • Inserting, Updating, Deleting Rows in a Table
  • Fetching data with SELECT queries
    • Filtering and Sorting
    • Aggregations
• Optimizations using *

ra-kesh

import { useReducer, useEffect } from 'react';
import { useSwipeable, SwipeableHandlers, EventData } from 'react-swipeable';

function previous(length: number, current: number) {
  return (current - 1 + length) % length;
}

function next(length: number, current: number) {
  return (current + 1) % length;
}

ra-kesh

// Returns an array of dates between the two dates
function getDates (startDate, endDate) {
  const dates = []
  let currentDate = startDate
  const addDays = function (days) {
    const date = new Date(this.valueOf())
    date.setDate(date.getDate() + days)
    return date
  }
  while (currentDate <= endDate) {

ra-kesh

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

ra-kesh

Eric Elliott's "Composing Software" Series

A collection of links to the excellent "Composing Software" series of medium stories by Eric Elliott.

Edit: I see that each post in the series now has index, previous and next links. However, they don't follow a linear flow through all the articles with some pointing back to previous posts effectively locking you in a loop.

• The Rise and Fall and Rise of Functional Programming
• Why Learn Functional Programming in JavaScript?
• A Functional Programmer’s Introduction to JavaScript
• [Higher Order Functions](https://medium.com/javascript-scene/higher-order-functions-com

ra-kesh

Eric Elliott's "Master the JavaScript Interview" Series

A collection of links to the "Master the JavaScript Interview" series of medium stories by Eric Elliott.

Not part of the series but a good grounding.

• The Two Pillars of JavaScript - Part 1
• The Two Pillars of JavaScript - Part 2
• 10 Interview Questions Every JavaScript Developer Should Know

Master the JavaScript Interview

ra-kesh

#!/usr/bin/env python3
"""
    Handbrake (json) Queue Creator
    last updated: 2021/jul/15 iexa
    
    changelog:
    - 21/jul/15: added rotation check
    - 21/jun/23: added ffmpeg automatic resolution sniffing
"""
import argparse