Refactor SearchInput to functional component with hooks (codesandbox#1871)

Author: MichaelDeBoey

.eslintrc

@@ -1,5 +1,6 @@
 {
   "extends": ["airbnb", "prettier", "prettier/react", "prettier/flowtype"],
+  "plugins": ["react-hooks"],
   "parser": "babel-eslint",
   "env": {
     "browser": true,
@@ -40,6 +41,8 @@
       }
     ],
     "no-param-reassign": ["error", { "props": false }],
-    "camelcase": "error"
+    "camelcase": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
   }
 }

package.json

@@ -71,6 +71,7 @@
     "eslint-plugin-import": "^2.3.0",
     "eslint-plugin-jsx-a11y": "^5.0.3",
     "eslint-plugin-react": "~7.4.0",
+    "eslint-plugin-react-hooks": "^1.6.0",
     "flow-bin": "^0.72.0",
     "gulp": "^3.9.1",
     "lerna": "^2.5.1",

packages/homepage/src/screens/home/NPMFeature/SearchInput/Hit.js

@@ -1,11 +1,9 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-
 import { TimelineMax } from 'gsap';
+import React, { useEffect, useRef } from 'react';
+import styled, { css } from 'styled-components';
 
 const Container = styled.a`
   transition: 0.3s ease all;
-  display: block;
   margin-bottom: 0.5rem;
   padding: 1rem;
   display: flex;
@@ -38,37 +36,38 @@ const Count = styled.div`
   font-size: 1.125rem;
 `;
 
-export default class Hit extends React.PureComponent {
-  componentDidMount() {
-    this.tl = new TimelineMax().fromTo(
-      this.el,
+const Hit = ({ hit: { count, value } }) => {
+  const el = useRef(null);
+  const tl = useRef(null);
+
+  useEffect(() => {
+    tl.current = new TimelineMax().fromTo(
+      el.current,
       0.1,
       { opacity: 0 },
       { opacity: 1 }
     );
-  }
+  }, []);
 
-  componentWillReceiveProps(nextProps) {
-    if (!this.props || nextProps.hit.value !== this.props.hit.value) {
-      this.tl.restart();
-    }
-  }
+  useEffect(
+    () => {
+      tl.current.restart();
+    },
+    [value]
+  );
 
-  render() {
-    return (
-      <Container
-        ref={el => {
-          this.el = el;
-        }}
-        href={`https://codesandbox.io/search?refinementList%5Bnpm_dependencies.dependency%5D%5B0%5D=${
-          this.props.hit.value
-        }&page=1`}
-        target="_blank"
-        rel="noreferrer noopener"
-      >
-        <Title>{this.props.hit.value}</Title>
-        <Count>{this.props.hit.count.toLocaleString('en-US')}</Count>
-      </Container>
-    );
-  }
-}
+  return (
+    <Container
+      href={`https://codesandbox.io/search?refinementList%5Bnpm_dependencies.dependency%5D%5B0%5D=${value}&page=1`}
+      ref={el}
+      rel="noreferrer noopener"
+      target="_blank"
+    >
+      <Title>{value}</Title>
+
+      <Count>{count.toLocaleString('en-US')}</Count>
+    </Container>
+  );
+};
+
+export default Hit;

packages/homepage/src/screens/home/NPMFeature/SearchInput/Input.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import Relative from '@codesandbox/common/lib/components/Relative';
@@ -33,26 +33,25 @@ const Icon = styled(SearchIcon)`
   color: rgba(0, 0, 0, 0.5);
 `;
 
-export default class SearchInput extends React.PureComponent {
-  state = {
-    query: '',
-  };
+const SearchInput = ({ searchQuery }) => {
+  const [query, setQuery] = useState('');
 
-  onChange = e => {
-    this.setState({ query: e.target.value });
-    this.props.searchQuery(e.target.value);
+  const onChange = e => {
+    setQuery(e.target.value);
+    searchQuery(e.target.value);
   };
 
-  render() {
-    return (
-      <Relative>
-        <Input
-          placeholder="Search for a dependency"
-          value={this.state.query}
-          onChange={this.onChange}
-        />
-        <Icon />
-      </Relative>
-    );
-  }
-}
+  return (
+    <Relative>
+      <Input
+        onChange={onChange}
+        placeholder="Search for a dependency"
+        value={query}
+      />
+
+      <Icon />
+    </Relative>
+  );
+};
+
+export default SearchInput;

packages/homepage/src/screens/home/NPMFeature/SearchInput/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import Input from './Input';
@@ -17,50 +17,48 @@ const Legend = styled.div`
   color: white;
 `;
 
-// eslint-disable-next-line
-export default class SearchInput extends React.PureComponent {
-  state = {
-    hits: [],
-  };
-
-  componentDidMount() {
-    this.searchQuery('');
-  }
+const SearchInput = () => {
+  const [hits, setHits] = useState([]);
 
-  searchQuery = (query: string) => {
+  const searchQuery = (query: string) => {
     searchFacets({
       facet: 'npm_dependencies.dependency',
       query,
       hitsPerPage: 3,
     }).then(({ facetHits }) => {
-      this.setState({
-        hits: facetHits,
-      });
+      setHits(facetHits);
     });
   };
 
-  render() {
-    return (
-      <div style={{ width: '100%' }}>
-        <Input searchQuery={this.searchQuery} />
-        <Legend>
-          <div>Dependency</div>
-          <div>Sandbox Count</div>
-        </Legend>
-        {this.state.hits.map(hit => <Hit key={hit.value} hit={hit} />)}
-        <a
-          href="https://www.algolia.com/?utm_source=algoliaclient&utm_medium=website&utm_content=codesandbox.io&utm_campaign=poweredby"
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          <img
-            alt="Algolia"
-            style={{ marginTop: '1rem' }}
-            width={160}
-            src={algoliaImage}
-          />
-        </a>
-      </div>
-    );
-  }
-}
+  useEffect(() => {
+    searchQuery('');
+  }, []);
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Input searchQuery={searchQuery} />
+
+      <Legend>
+        <div>Dependency</div>
+        <div>Sandbox Count</div>
+      </Legend>
+
+      {hits.map(hit => <Hit key={hit.value} hit={hit} />)}
+
+      <a
+        href="https://www.algolia.com/?utm_source=algoliaclient&utm_medium=website&utm_content=codesandbox.io&utm_campaign=poweredby"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        <img
+          alt="Algolia"
+          style={{ marginTop: '1rem' }}
+          width={160}
+          src={algoliaImage}
+        />
+      </a>
+    </div>
+  );
+};
+
+export default SearchInput;

yarn.lock

@@ -9552,7 +9552,7 @@ eslint-plugin-jsx-a11y@^6.0.3:
     has "^1.0.3"
     jsx-ast-utils "^2.0.1"
 
-[email protected]:
+[email protected], eslint-plugin-react-hooks@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.6.0.tgz#348efcda8fb426399ac7b8609607c7b4025a6f5f"
   integrity sha512-lHBVRIaz5ibnIgNG07JNiAuBUeKhEf8l4etNx5vfAEwqQ5tcuK3jV9yjmopPgQDagQb7HwIuQVsE3IVcGrRnag==