Jamie Haywood jamiehaywood

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Unique Array Based on Property #jsbench #jsperf</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
</head>
<body>
	<h1>Open the console to view the results</h1>

## PageTwo.tsx
import React from "react";

import { useGlobalState } from "./GlobalStateProvider";

const PageTwo = () => {
  const { state } = useGlobalState();

  return (
    <div>
      <h1>State from PageOne:</h1>

## PageOne.tsx
import React from "react";
import { useHistory } from "react-router-dom";
import { useForm } from "react-hook-form";

import { useGlobalState, GlobalStateInterface } from "./GlobalStateProvider";

const PageOne = () => {
  const history = useHistory();
  const { handleSubmit, register } = useForm();
  const { setState } = useGlobalState();

## App.tsx
import React from "react";
import { Route, Switch } from "react-router-dom";
import { GlobalStateProvider } from "./GlobalStateProvider";

import PageOne from "./PageOne";
import PageTwo from "./PageTwo";

function App() {
  return (
    <Switch>

## GlobalStateProvider.tsx
import React, { createContext, useState, useContext, Dispatch, SetStateAction } from "react";

export interface GlobalStateInterface {
  firstname: string;
  lastname: string;
  age: string;
}

const GlobalStateContext = createContext({
  state: {} as Partial<GlobalStateInterface>,

## useGlobalState.tsx
const useGlobalState = () => {
  const context = useContext(GlobalStateContext);
  if (!context) {
    throw new Error("useGlobalState must be used within a GlobalStateContext");
  }
  return context;
};

## GlobalStateProvider.tsx
const GlobalStateProvider = ({
  children,
  value = {} as GlobalStateInterface,
}: {
  children: React.ReactNode;
  value?: Partial<GlobalStateInterface>;
}) => {
  const [state, setState] = useState(value);
  return (
    <GlobalStateContext.Provider value={{ state, setState }}>

## GlobalStateContext.tsx
const GlobalStateContext = createContext({
  state: {} as Partial<GlobalStateInterface>,
  setState: {} as Dispatch<SetStateAction<Partial<GlobalStateInterface>>>,
});

## GlobalStateInterface.tsx
export interface GlobalStateInterface {
  firstname: string;
  lastname: string;
  age: string;
}

## SVGButton.tsx
import React from "react";
import "./Button.scss";
import * as SVG from "../../images";
import { Link } from "react-router-dom";

interface ButtonProps
  extends React.DetailedHTMLProps<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement
  > {
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Unique Array Based on Property #jsbench #jsperf</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>
	import React from "react";

	import { useGlobalState } from "./GlobalStateProvider";

	const PageTwo = () => {
	const { state } = useGlobalState();

	return (
	<div>
	<h1>State from PageOne:</h1>
	import React from "react";
	import { useHistory } from "react-router-dom";
	import { useForm } from "react-hook-form";

	import { useGlobalState, GlobalStateInterface } from "./GlobalStateProvider";

	const PageOne = () => {
	const history = useHistory();
	const { handleSubmit, register } = useForm();
	const { setState } = useGlobalState();
	import React from "react";
	import { Route, Switch } from "react-router-dom";
	import { GlobalStateProvider } from "./GlobalStateProvider";

	import PageOne from "./PageOne";
	import PageTwo from "./PageTwo";

	function App() {
	return (
	<Switch>
	import React, { createContext, useState, useContext, Dispatch, SetStateAction } from "react";

	export interface GlobalStateInterface {
	firstname: string;
	lastname: string;
	age: string;
	}

	const GlobalStateContext = createContext({
	state: {} as Partial<GlobalStateInterface>,
	const useGlobalState = () => {
	const context = useContext(GlobalStateContext);
	if (!context) {
	throw new Error("useGlobalState must be used within a GlobalStateContext");
	}
	return context;
	};
	const GlobalStateProvider = ({
	children,
	value = {} as GlobalStateInterface,
	}: {
	children: React.ReactNode;
	value?: Partial<GlobalStateInterface>;
	}) => {
	const [state, setState] = useState(value);
	return (
	<GlobalStateContext.Provider value={{ state, setState }}>
	const GlobalStateContext = createContext({
	state: {} as Partial<GlobalStateInterface>,
	setState: {} as Dispatch<SetStateAction<Partial<GlobalStateInterface>>>,
	});
	import React from "react";
	import "./Button.scss";
	import * as SVG from "../../images";
	import { Link } from "react-router-dom";

	interface ButtonProps
	extends React.DetailedHTMLProps<
	React.ButtonHTMLAttributes<HTMLButtonElement>,
	HTMLButtonElement
	> {