Step 2 - Convert SelectUsers component

src/SelectUsers.js

@@ -1,61 +1,44 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Select } from 'evergreen-ui';
 
-export default class SelectUsers extends React.Component {
-  constructor(props) {
-    super(props);
+const SelectUsers = ({ isLoading, userId, onChange, users }) => {
+  // const x = useMemo(()=> {return something}, [])
+  const [calculatedUsers, setCalculatedUsers] = useState([]);
 
-    this.state = {
-      calculatedUsers: [],
+  useEffect(() => {
+    const expensiveCalculationOnUsers = () => {
+      if (users) {
+        console.log('OMG this takes forever');
+        return users;
+      }
+      return [];
     };
-  }
 
-  expensiveCalculationOnUsers() {
-    if (this.props.users) {
-      console.log('OMG this takes forever');
-      return this.props.users;
-    }
-    return [];
-  }
+    setCalculatedUsers(expensiveCalculationOnUsers());
+  }, [users]);
 
-  componentDidMount() {
-    this.setState({
-      calculatedUsers: this.expensiveCalculationOnUsers(),
-    });
-  }
+  return (
+    <Select
+      disabled={isLoading || !calculatedUsers.length}
+      onChange={e => onChange(e.currentTarget.name, e.currentTarget.value)}
+      value={userId}
+      name="userId"
+      id="userId"
+    >
+      {isLoading || !calculatedUsers.length ? (
+        <option>Loading users...</option>
+      ) : (
+        <>
+          <option value="">Select User...</option>
+          {calculatedUsers.map(user => (
+            <option key={user.id} value={user.id}>
+              {user.name}
+            </option>
+          ))}
+        </>
+      )}
+    </Select>
+  );
+};
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.users !== this.props.users) {
-      this.setState({
-        calculatedUsers: this.expensiveCalculationOnUsers(),
-      });
-    }
-  }
-
-  render() {
-    const { isLoading, userId, onChange } = this.props;
-
-    return (
-      <Select
-        disabled={isLoading || !this.state.calculatedUsers.length}
-        onChange={e => onChange(e.currentTarget.name, e.currentTarget.value)}
-        value={userId}
-        name="userId"
-        id="userId"
-      >
-        {isLoading || !this.state.calculatedUsers.length ? (
-          <option>Loading users...</option>
-        ) : (
-          <>
-            <option value="">Select User...</option>
-            {this.state.calculatedUsers.map(user => (
-              <option key={user.id} value={user.id}>
-                {user.name}
-              </option>
-            ))}
-          </>
-        )}
-      </Select>
-    );
-  }
-}
+export default SelectUsers;

src/index.js

@@ -4,7 +4,7 @@ import App from './App';
 import { hijackEffects } from 'stop-runaway-react-effects';
 
 if (process.env.NODE_ENV !== 'production') {
-  hijackEffects();
+  hijackEffects({ callCount: 30, timeLimit: 6000 });
 }
 
 const rootElement = document.getElementById('root');