Benchmarks.js

import React, {useEffect} from 'react';
import {StyleSheet, View} from 'react-native';
import {map, mapValues} from 'lodash';

function execute(fn) {
  const start = global.performance.now();
  fn();
  const end = global.performance.now() - start;

  return end;
}

function runBenchmark(name, fn) {
  const times = [];
  for (let i = 0; i < 10; i++) {
    times.push(execute(fn));
  }

  global.console.log('Benchmark', name, times);
}

const array = Array.from({length: 100000}).map((_, index) => ({
  id: index,
  value: new Date().toString(),
}));

const obj = Array.from({length: 100000}).reduce((acc, current, index) => {
  acc[index] = {
    id: index,
    value: new Date().toString(),
  };

  return acc;
}, {});

setTimeout(() => {
  runBenchmark('for loop', () => {
    const r = [];
    for (let i = 0; i < array.length; i++) {
      const item = array[i];
      const res = item.id + item.value;
      r.push(res);
    }
  });

  runBenchmark('for of', () => {
    const r = [];
    for (let item of array) {
      r.push(item.id + item.value);
    }
  });

  runBenchmark('lodah#map', () => {
    const r = map(array, item => {
      return item.id + item.value;
    });
  });

  runBenchmark('Array#map', () => {
    const r = array.map(item => {
      return item.id + item.value;
    });
  });

  runBenchmark('Array#filter + Array#map', () => {
    const r = array
      .filter(item => {
        return item.id % 2;
      })
      .map(item => {
        return item.id + item.value;
      });
  });

  runBenchmark('for of filter', () => {
    const r = [];
    for (const item of array) {
      if (item.id % 2) {
        const res = item.id + item.value;
      }
    }
  });

  runBenchmark('for loop obj', () => {
    const r = {};
    const keys = Object.keys(obj);
    for (let i = 0; i < keys.length; i++) {
      const key = keys[i];
      const item = obj[key];
      const res = item.id + item.value;
      r[key] = res;
    }
  });

  runBenchmark('for in obj', () => {
    const r = {};
    for (let key in obj) {
      const item = obj[key];
      const res = item.id + item.value;
      r[key] = res;
    }
  });

  runBenchmark('lodah#mapValues', () => {
    const r = mapValues(obj, item => {
      return item.id + item.value;
    });
  });

  runBenchmark('reduce object', () => {
    const r = Object.keys(obj).reduce((acc, key) => {
      if (obj[key].id % 2) {
        acc[key] = obj[key].id + obj[key].value;
      }

      return acc;
    }, {});
  });
}, 3000);

export default function Interpolation() {
  useEffect(() => {}, []);

  // const [currentIndex, setIndex] = useState(0);

  // const currentPath = data[currentIndex];

  return (
    <View style={{flex: 1}}>
      {/* <Graph currentPath={currentPath.path} />

      <Timeline
        currentIndex={currentIndex}
        timelines={data}
        onChange={setIndex}
      /> */}
    </View>
  );
}