rmdort

:root {
  --rnc-background: 0 0% 100%;
  --rnc-foreground: 222.2 47.4% 11.2%;
  --rnc-muted: 0 0% 90.9%;
  --rnc-muted-foreground: 215.4 16.3% 46.9%;
  --rnc-popover: 0 0% 100%;
  --rnc-popover-foreground: 222.2 47.4% 11.2%;
  --rnc-card: 0 0% 100%;
  --rnc-card-foreground: 222.2 47.4% 11.2%;
  --rnc-border: 0 0% 78.0%;

rmdort

// Setup
const { onIncreaseIndent, onDecreaseIndent } = useSpreadsheetState()

return (
  <CanvasGrid
    onIncreaseIndent={onIncreaseIndent}
    onDecreaseIndent={onDecreaseIndent}
  />
)

rmdort

// Option 1 - With useSpreadsheetState hook
// Calculator has to expose the following functions
/*
getPrecedents,
getPrecedentsFromFormulaString,
getDependents,
getGraphNodes,
*/

export const Spreadsheet = () => {

rmdort

import { useCallback, useRef, useSyncExternalStore } from "react";

export const useAsyncHook = <T>(fn: () => Promise<T> | undefined) => {
  const resultRef = useRef<T>();
  const getSnapShot = () => resultRef.current;
  const subscribe = useCallback(
    (onStoreChange: () => void) => {
      const executeAsync = async () => {
        try {
          const result = await fn?.();

rmdort

import { useRef, useLayoutEffect } from "react";

export const useMemoCompare = <T>(
  next: T,
  compare: (previous: T | undefined, next: T) => boolean
): T => {
  const previousRef = useRef<T>();
  const previous = previousRef.current;
  const isEqual = compare(previous, next);

rmdort

import { useRef, useLayoutEffect, useState, useCallback } from "react";

type HTMLOrSVGElement = HTMLElement | SVGElement;

export type RectReadOnly = {
  readonly x: number;
  readonly y: number;
  readonly width: number;
  readonly height: number;
  readonly top: number;

rmdort

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

• Profiling in production
  • Create React App
  • Webpack 4
• Troubleshooting
  • Tracing broke after an NPM update

Profiling in production

rmdort

import React, {useState} from 'react';
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello from {'\n'}React Native Web!</Text>
      <TouchableOpacity
        onPress={() => setCount(count + 1)}

rmdort

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .header {
    background: #eee;
    padding: 1rem;
    display: flex;

rmdort

/**
 * Visit a graph node
 * Sort it topologically and return
 * all the dependents
 * @param nodes
 * @param previsit
 * @returns
 */
const topologicalSort = <T>(nodes: T[], children: (node: T) => Set<T>) => {
  const stack = new Set<T>();