diff --git a/packages/website/ts/components/annoucement_banner.tsx b/packages/website/ts/components/annoucement_banner.tsx
index e18a5d29dc..b02c446ef7 100644
--- a/packages/website/ts/components/annoucement_banner.tsx
+++ b/packages/website/ts/components/annoucement_banner.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
diff --git a/packages/website/ts/components/background_marquee.tsx b/packages/website/ts/components/background_marquee.tsx
index f632eb2d4e..f5337b7d6b 100644
--- a/packages/website/ts/components/background_marquee.tsx
+++ b/packages/website/ts/components/background_marquee.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled, { keyframes } from 'styled-components';
 
 const scrollFactory = (height: number, imgRepeatCt: number) => keyframes`
diff --git a/packages/website/ts/components/docs/header/header.tsx b/packages/website/ts/components/docs/header/header.tsx
index ff4ccf56d9..8a456fd59a 100644
--- a/packages/website/ts/components/docs/header/header.tsx
+++ b/packages/website/ts/components/docs/header/header.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import Headroom from 'react-headroom';
 import MediaQuery from 'react-responsive';
 import styled, { css } from 'styled-components';
diff --git a/packages/website/ts/components/docs/header/mobileNav.tsx b/packages/website/ts/components/docs/header/mobileNav.tsx
index e2e3efa685..ef4a13fc65 100644
--- a/packages/website/ts/components/docs/header/mobileNav.tsx
+++ b/packages/website/ts/components/docs/header/mobileNav.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import MediaQuery from 'react-responsive';
 import styled from 'styled-components';
 
diff --git a/packages/website/ts/components/docs/home/community_links.tsx b/packages/website/ts/components/docs/home/community_links.tsx
index 688229b12b..90ffa7b25d 100644
--- a/packages/website/ts/components/docs/home/community_links.tsx
+++ b/packages/website/ts/components/docs/home/community_links.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { Link } from '@0x/react-shared';
diff --git a/packages/website/ts/components/docs/home/get_started_links.tsx b/packages/website/ts/components/docs/home/get_started_links.tsx
index b95984d79d..266c89a3df 100644
--- a/packages/website/ts/components/docs/home/get_started_links.tsx
+++ b/packages/website/ts/components/docs/home/get_started_links.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { Button } from 'ts/components/button';
diff --git a/packages/website/ts/components/docs/home/middle_section.tsx b/packages/website/ts/components/docs/home/middle_section.tsx
index c7d0a069b9..23415d5825 100644
--- a/packages/website/ts/components/docs/home/middle_section.tsx
+++ b/packages/website/ts/components/docs/home/middle_section.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { Heading } from 'ts/components/text';
diff --git a/packages/website/ts/components/docs/home/shortcut_links.tsx b/packages/website/ts/components/docs/home/shortcut_links.tsx
index 367f168bd8..550f19d581 100644
--- a/packages/website/ts/components/docs/home/shortcut_links.tsx
+++ b/packages/website/ts/components/docs/home/shortcut_links.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { Icon } from 'ts/components/icon';
diff --git a/packages/website/ts/components/docs/home/step_links.tsx b/packages/website/ts/components/docs/home/step_links.tsx
index e98cfd5f6b..3688278e05 100644
--- a/packages/website/ts/components/docs/home/step_links.tsx
+++ b/packages/website/ts/components/docs/home/step_links.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { Link } from '@0x/react-shared';
diff --git a/packages/website/ts/components/docs/layout/docs_page_layout.tsx b/packages/website/ts/components/docs/layout/docs_page_layout.tsx
index bbcf1eafd4..347983b733 100644
--- a/packages/website/ts/components/docs/layout/docs_page_layout.tsx
+++ b/packages/website/ts/components/docs/layout/docs_page_layout.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import MediaQuery from 'react-responsive';
 import styled from 'styled-components';
 
diff --git a/packages/website/ts/components/docs/layout/hero.tsx b/packages/website/ts/components/docs/layout/hero.tsx
index 0dc350dae9..47fbc656f8 100644
--- a/packages/website/ts/components/docs/layout/hero.tsx
+++ b/packages/website/ts/components/docs/layout/hero.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { SearchInput } from 'ts/components/docs/search/search_input';
diff --git a/packages/website/ts/components/docs/layout/scroll_top_arrow.tsx b/packages/website/ts/components/docs/layout/scroll_top_arrow.tsx
index 641e00ac51..4ecbce6433 100644
--- a/packages/website/ts/components/docs/layout/scroll_top_arrow.tsx
+++ b/packages/website/ts/components/docs/layout/scroll_top_arrow.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import * as React from 'react';
 import { animateScroll } from 'react-scroll';
 import styled from 'styled-components';
 
@@ -8,10 +8,10 @@ import { colors } from 'ts/style/colors';
 import { fadeIn, fadeOut } from 'ts/style/keyframes';
 
 export const ScrollTopArrow = () => {
-    const [scrollY, setScrollY] = useState<number>(window.scrollY);
+    const [scrollY, setScrollY] = React.useState<number>(window.scrollY);
     const isArrowVisible = scrollY > 100;
 
-    useEffect(
+    React.useEffect(
         () => {
             const handleScroll = () => setScrollY(window.scrollY);
             window.addEventListener('scroll', debounce(handleScroll));
diff --git a/packages/website/ts/components/docs/layout/siteWrap.tsx b/packages/website/ts/components/docs/layout/siteWrap.tsx
index 0094b57824..1b45546c3f 100644
--- a/packages/website/ts/components/docs/layout/siteWrap.tsx
+++ b/packages/website/ts/components/docs/layout/siteWrap.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import * as React from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 
 import { Header } from 'ts/components/docs/header/header';
@@ -22,9 +22,9 @@ interface IMainProps {
 
 export const SiteWrap: React.FC<ISiteWrapProps> = props => {
     const { children, theme = 'dark', isFullScreen } = props;
-    const [isMobileNavOpen, setIsMobileNavOpen] = useState<boolean>(false);
+    const [isMobileNavOpen, setIsMobileNavOpen] = React.useState<boolean>(false);
 
-    useEffect(() => {
+    React.useEffect(() => {
         document.documentElement.style.overflowY = 'auto';
         window.scrollTo(0, 0);
     }, []);
diff --git a/packages/website/ts/components/docs/mdx/code.tsx b/packages/website/ts/components/docs/mdx/code.tsx
index 57984e06fb..b414f57e97 100644
--- a/packages/website/ts/components/docs/mdx/code.tsx
+++ b/packages/website/ts/components/docs/mdx/code.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import * as React from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 
@@ -15,7 +15,7 @@ interface ICodeProps {
 }
 
 export const Code: React.FC<ICodeProps> = ({ children, className = 'language-typescript', canRun = false }) => {
-    const [isCopied, setIsCopied] = useState<boolean>(false);
+    const [isCopied, setIsCopied] = React.useState<boolean>(false);
     const copyButtonText = isCopied ? 'Copied!' : 'Copy';
 
     // Passing in LANGUAGE to code in mdx results in classname 'language-<LANGUAGE>'
diff --git a/packages/website/ts/components/docs/mdx/code_run.tsx b/packages/website/ts/components/docs/mdx/code_run.tsx
index 023943dcc4..c886cb2e06 100644
--- a/packages/website/ts/components/docs/mdx/code_run.tsx
+++ b/packages/website/ts/components/docs/mdx/code_run.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Button } from 'ts/components/button';
 
diff --git a/packages/website/ts/components/docs/mdx/code_tabs.tsx b/packages/website/ts/components/docs/mdx/code_tabs.tsx
index 3fe4465dd6..bfaaac46f9 100644
--- a/packages/website/ts/components/docs/mdx/code_tabs.tsx
+++ b/packages/website/ts/components/docs/mdx/code_tabs.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import {
diff --git a/packages/website/ts/components/docs/mdx/help_callout.tsx b/packages/website/ts/components/docs/mdx/help_callout.tsx
index 69b579d226..9186e939d3 100644
--- a/packages/website/ts/components/docs/mdx/help_callout.tsx
+++ b/packages/website/ts/components/docs/mdx/help_callout.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { Link } from '@0x/react-shared';
diff --git a/packages/website/ts/components/docs/mdx/helpful_cta.tsx b/packages/website/ts/components/docs/mdx/helpful_cta.tsx
index fed7907fc8..f00d97064d 100644
--- a/packages/website/ts/components/docs/mdx/helpful_cta.tsx
+++ b/packages/website/ts/components/docs/mdx/helpful_cta.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import * as React from 'react';
 import styled, { keyframes } from 'styled-components';
 
 import { analytics } from 'ts/utils/analytics';
@@ -16,7 +16,7 @@ interface IHelpfulCtaProps {
 }
 
 export const HelpfulCta: React.FC<IHelpfulCtaProps> = ({ note, page, question }) => {
-    const [isClicked, setIsClicked] = useState<boolean>(false);
+    const [isClicked, setIsClicked] = React.useState<boolean>(false);
 
     const vote = (yesno: string) => {
         analytics.track('was_this_helpful_feedback', { yesno, page });
diff --git a/packages/website/ts/components/docs/mdx/inline_link.tsx b/packages/website/ts/components/docs/mdx/inline_link.tsx
index 0a02eeee91..2628936ba7 100644
--- a/packages/website/ts/components/docs/mdx/inline_link.tsx
+++ b/packages/website/ts/components/docs/mdx/inline_link.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { Link } from '@0x/react-shared';
 
diff --git a/packages/website/ts/components/docs/mdx/newsletter_widget.tsx b/packages/website/ts/components/docs/mdx/newsletter_widget.tsx
index de2ef6d7be..3a5b00b96a 100644
--- a/packages/website/ts/components/docs/mdx/newsletter_widget.tsx
+++ b/packages/website/ts/components/docs/mdx/newsletter_widget.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { NewsletterForm } from 'ts/components/newsletter_form';
diff --git a/packages/website/ts/components/docs/mdx/note.tsx b/packages/website/ts/components/docs/mdx/note.tsx
index 21f37bb1af..b968f1077e 100644
--- a/packages/website/ts/components/docs/mdx/note.tsx
+++ b/packages/website/ts/components/docs/mdx/note.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { Heading, Paragraph } from 'ts/components/text';
diff --git a/packages/website/ts/components/docs/mdx/notification.tsx b/packages/website/ts/components/docs/mdx/notification.tsx
index 5dc3380e58..4fa0a50353 100644
--- a/packages/website/ts/components/docs/mdx/notification.tsx
+++ b/packages/website/ts/components/docs/mdx/notification.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
diff --git a/packages/website/ts/components/docs/resource/level.tsx b/packages/website/ts/components/docs/resource/level.tsx
index 230e115963..298017a78c 100644
--- a/packages/website/ts/components/docs/resource/level.tsx
+++ b/packages/website/ts/components/docs/resource/level.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { RatingBar } from 'ts/components/docs/resource/rating_bar';
diff --git a/packages/website/ts/components/docs/resource/rating_bar.tsx b/packages/website/ts/components/docs/resource/rating_bar.tsx
index 79cb83270d..c2638b6574 100644
--- a/packages/website/ts/components/docs/resource/rating_bar.tsx
+++ b/packages/website/ts/components/docs/resource/rating_bar.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
diff --git a/packages/website/ts/components/docs/resource/resource.tsx b/packages/website/ts/components/docs/resource/resource.tsx
index 9785d8fd90..028ac0513f 100644
--- a/packages/website/ts/components/docs/resource/resource.tsx
+++ b/packages/website/ts/components/docs/resource/resource.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { Link } from '@0x/react-shared';
diff --git a/packages/website/ts/components/docs/resource/tag.tsx b/packages/website/ts/components/docs/resource/tag.tsx
index 676adf99c0..432bdb8b04 100644
--- a/packages/website/ts/components/docs/resource/tag.tsx
+++ b/packages/website/ts/components/docs/resource/tag.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
diff --git a/packages/website/ts/components/docs/search/autocomplete.tsx b/packages/website/ts/components/docs/search/autocomplete.tsx
index 2c385052f8..9c02d610c1 100644
--- a/packages/website/ts/components/docs/search/autocomplete.tsx
+++ b/packages/website/ts/components/docs/search/autocomplete.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import * as React from 'react';
 import Autosuggest from 'react-autosuggest';
 import { connectAutoComplete, Highlight, Snippet } from 'react-instantsearch-dom';
 
@@ -38,9 +38,9 @@ interface IAutoCompleteProps {
 }
 
 const CustomAutoComplete: React.FC<IAutoCompleteProps> = ({ isHome = false, hits = [], currentRefinement, refine }) => {
-    const [value, setValue] = useState<string>('');
+    const [value, setValue] = React.useState<string>('');
 
-    useEffect(() => {
+    React.useEffect(() => {
         const handleEscapeKeyUp: any = (event: React.KeyboardEvent): void => {
             if (event.key === 'Escape') {
                 setValue('');
diff --git a/packages/website/ts/components/docs/search/search_input.tsx b/packages/website/ts/components/docs/search/search_input.tsx
index 1001fe2a22..b73b5e64b8 100644
--- a/packages/website/ts/components/docs/search/search_input.tsx
+++ b/packages/website/ts/components/docs/search/search_input.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Configure, Index, InstantSearch } from 'react-instantsearch-dom';
 
 import { AutoComplete } from 'ts/components/docs/search/autocomplete';
diff --git a/packages/website/ts/components/docs/sidebar/collapse.tsx b/packages/website/ts/components/docs/sidebar/collapse.tsx
index 0b483db5df..f17987f1f8 100644
--- a/packages/website/ts/components/docs/sidebar/collapse.tsx
+++ b/packages/website/ts/components/docs/sidebar/collapse.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
@@ -15,7 +15,7 @@ interface ICollapse {
 }
 
 export const Collapse: React.FC<ICollapseProps> = props => {
-    const [isActive, setIsActive] = useState<boolean>(true);
+    const [isActive, setIsActive] = React.useState<boolean>(true);
     // @ts-ignore
     const [contentRef, { height }] = useDimensions();
 
diff --git a/packages/website/ts/components/docs/sidebar/filter.tsx b/packages/website/ts/components/docs/sidebar/filter.tsx
index bb99732348..62b471fe42 100644
--- a/packages/website/ts/components/docs/sidebar/filter.tsx
+++ b/packages/website/ts/components/docs/sidebar/filter.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
diff --git a/packages/website/ts/components/docs/sidebar/filters.tsx b/packages/website/ts/components/docs/sidebar/filters.tsx
index 063228cf86..559bc71469 100644
--- a/packages/website/ts/components/docs/sidebar/filters.tsx
+++ b/packages/website/ts/components/docs/sidebar/filters.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import _ from 'lodash';
 
diff --git a/packages/website/ts/components/docs/sidebar/filters_group.tsx b/packages/website/ts/components/docs/sidebar/filters_group.tsx
index d63f7013a5..7667393805 100644
--- a/packages/website/ts/components/docs/sidebar/filters_group.tsx
+++ b/packages/website/ts/components/docs/sidebar/filters_group.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { connectRefinementList } from 'react-instantsearch-dom';
 
 import { Filter, IFilterProps } from 'ts/components/docs/sidebar/filter';
diff --git a/packages/website/ts/components/docs/sidebar/sidebar_wrapper.tsx b/packages/website/ts/components/docs/sidebar/sidebar_wrapper.tsx
index 2fef13c371..fd42102289 100644
--- a/packages/website/ts/components/docs/sidebar/sidebar_wrapper.tsx
+++ b/packages/website/ts/components/docs/sidebar/sidebar_wrapper.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import MediaQuery from 'react-responsive';
 import styled from 'styled-components';
 
diff --git a/packages/website/ts/components/docs/sidebar/table_of_contents.tsx b/packages/website/ts/components/docs/sidebar/table_of_contents.tsx
index f0df01cd55..7ca4d5d457 100644
--- a/packages/website/ts/components/docs/sidebar/table_of_contents.tsx
+++ b/packages/website/ts/components/docs/sidebar/table_of_contents.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { Link } from '@0x/react-shared';
diff --git a/packages/website/ts/components/docs/tools/feature_link.tsx b/packages/website/ts/components/docs/tools/feature_link.tsx
index 0d475c4c9b..52a0faa748 100644
--- a/packages/website/ts/components/docs/tools/feature_link.tsx
+++ b/packages/website/ts/components/docs/tools/feature_link.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import MediaQuery from 'react-responsive';
diff --git a/packages/website/ts/components/dropdowns/dropdown_products.tsx b/packages/website/ts/components/dropdowns/dropdown_products.tsx
index 1f9cc32966..77c5156c01 100644
--- a/packages/website/ts/components/dropdowns/dropdown_products.tsx
+++ b/packages/website/ts/components/dropdowns/dropdown_products.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index c8199fb219..cdfce006c8 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,4 +1,3 @@
-import * as _ from 'lodash';
 import * as React from 'react';
 import MediaQuery from 'react-responsive';
 import styled from 'styled-components';
diff --git a/packages/website/ts/components/hamburger.tsx b/packages/website/ts/components/hamburger.tsx
index 4ead7ea63b..2c3241f57e 100644
--- a/packages/website/ts/components/hamburger.tsx
+++ b/packages/website/ts/components/hamburger.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { zIndex } from 'ts/style/z_index';
diff --git a/packages/website/ts/components/mobileNav.tsx b/packages/website/ts/components/mobileNav.tsx
index 6a15a89037..c4747fdbe8 100644
--- a/packages/website/ts/components/mobileNav.tsx
+++ b/packages/website/ts/components/mobileNav.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { Link } from '@0x/react-shared';
diff --git a/packages/website/ts/components/newsletter_form.tsx b/packages/website/ts/components/newsletter_form.tsx
index 11af4b9c77..ad3a732e64 100644
--- a/packages/website/ts/components/newsletter_form.tsx
+++ b/packages/website/ts/components/newsletter_form.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 
 import { fadeIn } from 'ts/style/keyframes';
@@ -24,7 +24,7 @@ interface IArrowProps {
 }
 
 export const NewsletterForm: React.FC<IFormProps> = ({ color }) => {
-    const [isSubmitted, setIsSubmitted] = useState<boolean>(false);
+    const [isSubmitted, setIsSubmitted] = React.useState<boolean>(false);
     const emailInput = React.createRef<HTMLInputElement>();
 
     const handleSubmit = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
diff --git a/packages/website/ts/components/siteWrap.tsx b/packages/website/ts/components/siteWrap.tsx
index 80e95828d5..36fff77a33 100644
--- a/packages/website/ts/components/siteWrap.tsx
+++ b/packages/website/ts/components/siteWrap.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import * as React from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 
 import { Footer } from 'ts/components/footer';
@@ -20,9 +20,9 @@ interface IMainProps {
 
 export const SiteWrap: React.FC<ISiteWrapProps> = props => {
     const { children, theme = 'dark', isFullScreen } = props;
-    const [isMobileNavOpen, setIsMobileNavOpen] = useState<boolean>(false);
+    const [isMobileNavOpen, setIsMobileNavOpen] = React.useState<boolean>(false);
 
-    useEffect(() => {
+    React.useEffect(() => {
         document.documentElement.style.overflowY = 'auto';
         window.scrollTo(0, 0);
     }, []);
diff --git a/packages/website/ts/pages/docs/guides.tsx b/packages/website/ts/pages/docs/guides.tsx
index 832dd0a754..8e1b777147 100644
--- a/packages/website/ts/pages/docs/guides.tsx
+++ b/packages/website/ts/pages/docs/guides.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { Hits, InstantSearch } from 'react-instantsearch-dom';
 
 import { Columns } from 'ts/components/docs/layout/columns';
diff --git a/packages/website/ts/pages/docs/home.tsx b/packages/website/ts/pages/docs/home.tsx
index 0a3076a0aa..230c58092a 100644
--- a/packages/website/ts/pages/docs/home.tsx
+++ b/packages/website/ts/pages/docs/home.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 
 import { CommunityLinks } from 'ts/components/docs/home/community_links';
 import { MiddleSection } from 'ts/components/docs/home/middle_section';
diff --git a/packages/website/ts/pages/docs/page.tsx b/packages/website/ts/pages/docs/page.tsx
index 70557e35ae..ae3aa4156b 100644
--- a/packages/website/ts/pages/docs/page.tsx
+++ b/packages/website/ts/pages/docs/page.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import * as React from 'react';
 import { match } from 'react-router-dom';
 
 import { MDXProvider } from '@mdx-js/react';
@@ -42,7 +42,7 @@ interface IDocsPageState {
 }
 
 export const DocsPage: React.FC<IDocsPageProps> = ({ match }) => {
-    const [state, setState] = useState<IDocsPageState>({
+    const [state, setState] = React.useState<IDocsPageState>({
         Component: null,
         contents: [],
         title: '',
@@ -54,7 +54,7 @@ export const DocsPage: React.FC<IDocsPageProps> = ({ match }) => {
     const isLoading = !Component && !wasNotFound;
     const { page, type } = match.params;
 
-    useEffect(
+    React.useEffect(
         () => {
             void loadPageAsync(page, type);
         },
diff --git a/packages/website/ts/pages/docs/tools.tsx b/packages/website/ts/pages/docs/tools.tsx
index 96bdcbae50..e3a246f500 100644
--- a/packages/website/ts/pages/docs/tools.tsx
+++ b/packages/website/ts/pages/docs/tools.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { connectHits, InstantSearch } from 'react-instantsearch-dom';
 import styled from 'styled-components';
 
diff --git a/packages/website/ts/style/dimensions.ts b/packages/website/ts/style/dimensions.ts
index 75e344d19a..e9e3e4f929 100644
--- a/packages/website/ts/style/dimensions.ts
+++ b/packages/website/ts/style/dimensions.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, useLayoutEffect } from 'react';
+import * as React from 'react';
 
 interface DimensionObject {
     width: number;
@@ -33,14 +33,14 @@ function getDimensionObject(node: HTMLElement): DimensionObject {
 }
 
 export function useDimensions({ liveMeasure = true }: UseDimensionsArgs = {}): UseDimensionsHook {
-    const [dimensions, setDimensions] = useState({});
-    const [node, setNode] = useState(null);
+    const [dimensions, setDimensions] = React.useState({});
+    const [node, setNode] = React.useState(null);
 
-    const ref = useCallback(node => {
+    const ref = React.useCallback(node => {
         setNode(node);
     }, []);
 
-    useLayoutEffect(
+    React.useLayoutEffect(
         // @ts-ignore
         () => {
             if (node) {