From 2da59ba53393cb1ccee4d6ccd2b422a7d3d7c5c3 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 26 Oct 2020 20:13:05 -0300
Subject: [PATCH] Context Performance

---
 components/auth/ForgotPassword.tsx |  4 ++--
 components/auth/LoginView.tsx      |  4 ++--
 components/auth/SignUpView.tsx     |  4 ++--
 components/ui/Input/Input.tsx      | 20 +++++++++++---------
 components/ui/context.tsx          | 29 ++++++++++++++++-------------
 5 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/components/auth/ForgotPassword.tsx b/components/auth/ForgotPassword.tsx
index 083a86649..1519e371c 100644
--- a/components/auth/ForgotPassword.tsx
+++ b/components/auth/ForgotPassword.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState, useCallback } from 'react'
 import { validate } from 'email-validator'
-import { Info } from'@components/icons'
+import { Info } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import { Logo, Button, Input } from '@components/ui'
 import useSignup from '@lib/bigcommerce/use-signup'
@@ -59,7 +59,7 @@ const ForgotPassword: FC<Props> = () => {
           <div className="text-red border border-red p-3">{message}</div>
         )}
 
-        <Input placeholder="Email" onChange={setEmail} />
+        <Input placeholder="Email" onChange={setEmail} type="email" />
         <div className="pt-2 w-full flex flex-col">
           <Button
             variant="slim"
diff --git a/components/auth/LoginView.tsx b/components/auth/LoginView.tsx
index b9cb4cb63..e2973fb39 100644
--- a/components/auth/LoginView.tsx
+++ b/components/auth/LoginView.tsx
@@ -70,8 +70,8 @@ const LoginView: FC<Props> = () => {
             </a>
           </div>
         )}
-        <Input placeholder="Email" onChange={setEmail} />
-        <Input placeholder="Password" onChange={setPassword} />
+        <Input placeholder="Email" onChange={setEmail} type="email" />
+        <Input placeholder="Password" onChange={setPassword} type="password" />
 
         <Button
           variant="slim"
diff --git a/components/auth/SignUpView.tsx b/components/auth/SignUpView.tsx
index 88763a3ff..b2664bf5e 100644
--- a/components/auth/SignUpView.tsx
+++ b/components/auth/SignUpView.tsx
@@ -69,8 +69,8 @@ const SignUpView: FC<Props> = () => {
         )}
         <Input placeholder="First Name" onChange={setFirstName} />
         <Input placeholder="Last Name" onChange={setLastName} />
-        <Input placeholder="Email" onChange={setEmail} />
-        <Input placeholder="Password" onChange={setPassword} />
+        <Input placeholder="Email" onChange={setEmail} type="email" />
+        <Input placeholder="Password" onChange={setPassword} type="password" />
         <span className="text-accents-8">
           <span className="inline-block align-middle ">
             <Info width="15" height="15" />
diff --git a/components/ui/Input/Input.tsx b/components/ui/Input/Input.tsx
index 404729479..dc2f04a8d 100644
--- a/components/ui/Input/Input.tsx
+++ b/components/ui/Input/Input.tsx
@@ -20,15 +20,17 @@ const Input: React.FC<Props> = (props) => {
   }
 
   return (
-    <input
-      className={rootClassName}
-      onChange={handleOnChange}
-      autoComplete="off"
-      autoCorrect="off"
-      autoCapitalize="off"
-      spellCheck="false"
-      {...rest}
-    />
+    <label>
+      <input
+        className={rootClassName}
+        onChange={handleOnChange}
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+        spellCheck="false"
+        {...rest}
+      />
+    </label>
   )
 }
 
diff --git a/components/ui/context.tsx b/components/ui/context.tsx
index aad1ca8aa..14b4af6c5 100644
--- a/components/ui/context.tsx
+++ b/components/ui/context.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, useMemo } from 'react'
 import { ThemeProvider } from 'next-themes'
 import { SSRProvider, OverlayProvider } from 'react-aria'
 
@@ -144,18 +144,21 @@ export const UIProvider: FC = (props) => {
   const setModalView = (view: MODAL_VIEWS) =>
     dispatch({ type: 'SET_MODAL_VIEW', view })
 
-  const value = {
-    ...state,
-    openSidebar,
-    closeSidebar,
-    openDropdown,
-    closeDropdown,
-    openModal,
-    closeModal,
-    setModalView,
-    openToast,
-    closeToast,
-  }
+  const value = useMemo(
+    () => ({
+      ...state,
+      openSidebar,
+      closeSidebar,
+      openDropdown,
+      closeDropdown,
+      openModal,
+      closeModal,
+      setModalView,
+      openToast,
+      closeToast,
+    }),
+    [state]
+  )
 
   return <UIContext.Provider value={value} {...props} />
 }