diff --git a/web/src/App.js b/web/src/App.js
index e2500a1..86830e4 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -28,10 +28,10 @@ import { mobile } from './util/css'
 import { isStandalone } from './util/pwa'
 
 export default function App() {
-  const [query, setQuery] = useDeferredState('', 1000)
+  const [query, setQuery] = useDeferredState(1000, '')
   const [inputValue, setInputValue] = useState('')
-  const inputRef = useRef()
   const [suggested, setSuggested] = useState(false)
+  const inputRef = useRef()
   const { t } = useTranslation()
 
   const queryGiven = query && query.length > 0
@@ -92,20 +92,20 @@ export default function App() {
         {queryGiven ? (
           <SearchResult>
             <Cards>
-              <DomainCard name={query} />
-              <GithubCard name={query} />
-              <NpmCard name={query} />
-              <PypiCard name={query} />
-              <RubyGemsCard name={query} />
-              <CratesioCard name={query} />
-              <HomebrewCard name={query} />
-              <LinuxCard name={query} />
+              <DomainCard query={query} />
+              <GithubCard query={query} />
+              <NpmCard query={query} />
+              <PypiCard query={query} />
+              <RubyGemsCard query={query} />
+              <CratesioCard query={query} />
+              <HomebrewCard query={query} />
+              <LinuxCard query={query} />
+              <TwitterCard query={query} />
+              <SlackCard query={query} />
+              <S3Card query={query} />
+              <JsOrgCard query={query} />
               <GithubSearchCard query={query} />
               <AppStoreCard query={query} />
-              <TwitterCard name={query} />
-              <SlackCard name={query} />
-              <S3Card name={query} />
-              <JsOrgCard name={query} />
             </Cards>
             <EventReporter query={query} />
           </SearchResult>
diff --git a/web/src/components/Footer.js b/web/src/components/Footer.js
index 948cf40..c2218aa 100644
--- a/web/src/components/Footer.js
+++ b/web/src/components/Footer.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
-import { FaTwitter, FaGithubAlt } from 'react-icons/fa'
 import { useTranslation } from 'react-i18next'
+import { FaTwitter, FaGithubAlt } from 'react-icons/fa'
 
 import { ExternalLink } from './Links'
 
diff --git a/web/src/components/Suggestion.js b/web/src/components/Suggestion.js
index db74b6b..890cd97 100644
--- a/web/src/components/Suggestion.js
+++ b/web/src/components/Suggestion.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import fetch from 'isomorphic-unfetch'
+
 import { capitalize } from '../util/text'
 
 const modifiers = [
diff --git a/web/src/components/cards/AppStoreCard.js b/web/src/components/cards/AppStoreCard.js
index bcb3a92..35956f0 100644
--- a/web/src/components/cards/AppStoreCard.js
+++ b/web/src/components/cards/AppStoreCard.js
@@ -11,7 +11,7 @@ function Search({ query }) {
   const apps = response.result
 
   return (
-    <div>
+    <>
       {apps.map((app) => (
         <Result
           title={app.name}
@@ -21,7 +21,7 @@ function Search({ query }) {
           key={app.id}
         />
       ))}
-    </div>
+    </>
   )
 }
 
diff --git a/web/src/components/cards/CratesioCard.js b/web/src/components/cards/CratesioCard.js
index 33a5b74..01e5382 100644
--- a/web/src/components/cards/CratesioCard.js
+++ b/web/src/components/cards/CratesioCard.js
@@ -4,9 +4,9 @@ import { DiRust } from 'react-icons/di'
 
 import { Card, Repeater, DedicatedAvailability } from '../Cards'
 
-export default function CratesioCard({ name }) {
+export default function CratesioCard({ query }) {
   const { t } = useTranslation()
-  const lowerCase = name.toLowerCase()
+  const lowerCase = query.toLowerCase()
 
   const names = [lowerCase]
 
diff --git a/web/src/components/cards/DomainCard.js b/web/src/components/cards/DomainCard.js
index 48819a1..b1a23bb 100644
--- a/web/src/components/cards/DomainCard.js
+++ b/web/src/components/cards/DomainCard.js
@@ -4,16 +4,17 @@ import { FaMapSigns } from 'react-icons/fa'
 
 import { Card, Repeater, DedicatedAvailability } from '../Cards'
 
-export default function DomainCard({ name }) {
+export default function DomainCard({ query }) {
   const { t } = useTranslation()
-  const lowerCase = name.toLowerCase()
+  const lowerCase = query.toLowerCase()
 
-  const names = [`${lowerCase}.com`, `${lowerCase}app.com`, `${lowerCase}.app`]
+  const names = [`${lowerCase}.com`, `${lowerCase}.app`]
   const moreNames = [
+    `${lowerCase}app.com`,
+    `get${lowerCase}.com`,
     `${lowerCase}.dev`,
     `${lowerCase}.io`,
     `${lowerCase}.tools`,
-    `get${lowerCase}.com`,
   ]
 
   return (
diff --git a/web/src/components/cards/GithubCard.js b/web/src/components/cards/GithubCard.js
index 61e5b80..0304aac 100644
--- a/web/src/components/cards/GithubCard.js
+++ b/web/src/components/cards/GithubCard.js
@@ -4,11 +4,11 @@ import { FaGithub } from 'react-icons/fa'
 
 import { Card, Repeater, DedicatedAvailability } from '../Cards'
 
-export default function GithubCard({ name }) {
+export default function GithubCard({ query }) {
   const { t } = useTranslation()
-  const lowerCase = name.toLowerCase()
+  const lowerCase = query.toLowerCase()
 
-  const names = [name]
+  const names = [query]
   const moreNames = [
     `${lowerCase}hq`,
     `${lowerCase}-team`,
diff --git a/web/src/components/cards/GithubSearchCard.js b/web/src/components/cards/GithubSearchCard.js
index b13222a..f606bd7 100644
--- a/web/src/components/cards/GithubSearchCard.js
+++ b/web/src/components/cards/GithubSearchCard.js
@@ -13,7 +13,7 @@ function Search({ query }) {
   const repos = response.items
 
   return (
-    <div>
+    <>
       {repos.map((repo) => (
         <Result
           title={repo.full_name}
@@ -23,7 +23,7 @@ function Search({ query }) {
           key={repo.id}
         />
       ))}
-    </div>
+    </>
   )
 }
 
diff --git a/web/src/components/cards/HomebrewCard.js b/web/src/components/cards/HomebrewCard.js
index f280899..6f6a05a 100644
--- a/web/src/components/cards/HomebrewCard.js
+++ b/web/src/components/cards/HomebrewCard.js
@@ -4,9 +4,9 @@ import { IoIosBeer } from 'react-icons/io'
 
 import { Card, Repeater, ExistentialAvailability } from '../Cards'
 
-export default function HomebrewCard({ name }) {
+export default function HomebrewCard({ query }) {
   const { t } = useTranslation()
-  const lowerCase = name.toLowerCase()
+  const lowerCase = query.toLowerCase()
 
   const names = [lowerCase]
 
diff --git a/web/src/components/cards/JsOrgCard.js b/web/src/components/cards/JsOrgCard.js
index f9481a5..39de180 100644
--- a/web/src/components/cards/JsOrgCard.js
+++ b/web/src/components/cards/JsOrgCard.js
@@ -4,9 +4,9 @@ import { FaJsSquare } from 'react-icons/fa'
 
 import { Card, Repeater, DedicatedAvailability } from '../Cards'
 
-export default function JsOrgCard({ name }) {
+export default function JsOrgCard({ query }) {
   const { t } = useTranslation()
-  const lowerCase = name.toLowerCase()
+  const lowerCase = query.toLowerCase()
 
   const names = [lowerCase]
 
diff --git a/web/src/components/cards/LinuxCard.js b/web/src/components/cards/LinuxCard.js
index bac6db3..dd61c3d 100644
--- a/web/src/components/cards/LinuxCard.js
+++ b/web/src/components/cards/LinuxCard.js
@@ -5,9 +5,9 @@ import { DiDebian } from 'react-icons/di'
 
 import { Card, Repeater, DedicatedAvailability } from '../Cards'
 
-export default function LinuxCard({ name }) {
+export default function LinuxCard({ query }) {
   const { t } = useTranslation()
-  const lowerCase = name.toLowerCase()
+  const lowerCase = query.toLowerCase()
 
   const names = [lowerCase]
 
diff --git a/web/src/components/cards/NpmCard.js b/web/src/components/cards/NpmCard.js
index 5224cc6..79777b0 100644
--- a/web/src/components/cards/NpmCard.js
+++ b/web/src/components/cards/NpmCard.js
@@ -4,9 +4,9 @@ import { FaNpm } from 'react-icons/fa'
 
 import { Card, Repeater, DedicatedAvailability } from '../Cards'
 
-export default function NpmCard({ name }) {
+export default function NpmCard({ query }) {
   const { t } = useTranslation()
-  const lowerCase = name.toLowerCase()
+  const lowerCase = query.toLowerCase()
 
   const names = [lowerCase]
   const moreNames = [`${lowerCase}-js`]
diff --git a/web/src/components/cards/PypiCard.js b/web/src/components/cards/PypiCard.js
index 4d543ac..80f14f7 100644
--- a/web/src/components/cards/PypiCard.js
+++ b/web/src/components/cards/PypiCard.js
@@ -5,11 +5,11 @@ import { FaPython } from 'react-icons/fa'
 import { capitalize } from '../../util/text'
 import { Card, DedicatedAvailability, Repeater } from '../Cards'
 
-export default function PypiCard({ name }) {
+export default function PypiCard({ query }) {
   const { t } = useTranslation()
 
-  const names = [name]
-  const moreNames = [`Py${capitalize(name)}`]
+  const names = [query]
+  const moreNames = [`Py${capitalize(query)}`]
 
   return (
     <Card title={t('providers.pypi')}>
diff --git a/web/src/components/cards/RubyGemsCard.js b/web/src/components/cards/RubyGemsCard.js
index 566b221..36c5284 100644
--- a/web/src/components/cards/RubyGemsCard.js
+++ b/web/src/components/cards/RubyGemsCard.js
@@ -4,11 +4,11 @@ import { FaGem } from 'react-icons/fa'
 
 import { Card, Repeater, DedicatedAvailability } from '../Cards'
 
-export default function RubyGemsCard({ name }) {
+export default function RubyGemsCard({ query }) {
   const { t } = useTranslation()
 
-  const names = [name]
-  const moreNames = [`${name.toLowerCase()}-rb`]
+  const names = [query]
+  const moreNames = [`${query.toLowerCase()}-rb`]
 
   return (
     <Card title={t('providers.rubygems')}>
diff --git a/web/src/components/cards/S3Card.js b/web/src/components/cards/S3Card.js
index 6c32573..d5b9ebf 100644
--- a/web/src/components/cards/S3Card.js
+++ b/web/src/components/cards/S3Card.js
@@ -4,9 +4,9 @@ import { FaAws } from 'react-icons/fa'
 
 import { Card, DedicatedAvailability, Repeater } from '../Cards'
 
-export default function S3Card({ name }) {
+export default function S3Card({ query }) {
   const { t } = useTranslation()
-  const lowerCase = name.toLowerCase()
+  const lowerCase = query.toLowerCase()
 
   const names = [lowerCase]
 
diff --git a/web/src/components/cards/SlackCard.js b/web/src/components/cards/SlackCard.js
index 03d28e9..fe6534f 100644
--- a/web/src/components/cards/SlackCard.js
+++ b/web/src/components/cards/SlackCard.js
@@ -4,9 +4,9 @@ import { FaSlack } from 'react-icons/fa'
 
 import { Card, DedicatedAvailability, Repeater } from '../Cards'
 
-export default function SlackCard({ name }) {
+export default function SlackCard({ query }) {
   const { t } = useTranslation()
-  const lowerCase = name.toLowerCase()
+  const lowerCase = query.toLowerCase()
 
   const names = [lowerCase]
 
diff --git a/web/src/components/cards/TwitterCard.js b/web/src/components/cards/TwitterCard.js
index 1d32af7..54f3968 100644
--- a/web/src/components/cards/TwitterCard.js
+++ b/web/src/components/cards/TwitterCard.js
@@ -5,17 +5,19 @@ import { FaTwitter } from 'react-icons/fa'
 import { capitalize } from '../../util/text'
 import { Card, Repeater, DedicatedAvailability } from '../Cards'
 
-export default function TwitterCard({ name }) {
+export default function TwitterCard({ query }) {
   const { t } = useTranslation()
+  const lowerCase = query.toLowerCase()
+  const capitalCase = capitalize(query)
 
-  const names = [name]
+  const names = [query]
   const moreNames = [
-    `${name.toLowerCase()}app`,
-    `hey${name.toLowerCase()}`,
-    `${capitalize(name)}Team`,
-    `${capitalize(name)}HQ`,
-    `${name.toLowerCase()}_official`,
-    `${name.toLowerCase()}-support`,
+    `${lowerCase}app`,
+    `hey${lowerCase}`,
+    `${capitalCase}Team`,
+    `${capitalCase}HQ`,
+    `${lowerCase}_official`,
+    `${lowerCase}-support`,
   ]
 
   return (
diff --git a/web/src/hooks/state.js b/web/src/hooks/state.js
index 8f247bf..a0876a3 100644
--- a/web/src/hooks/state.js
+++ b/web/src/hooks/state.js
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 
-export function useDeferredState(initialValue = undefined, duration = 1000) {
+export function useDeferredState(duration = 1000, initialValue = undefined) {
   const [response, setResponse] = useState(initialValue)
   const [innerValue, setInnerValue] = useState(initialValue)