Install eslint for hooks

.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
     "jest",
     "jsx-a11y",
     "react",
+    "react-hooks",
     "security"
   ],
   extends: [
@@ -125,6 +126,8 @@ module.exports = {
     "prefer-destructuring": "off",
     "prefer-reflect": "off",
     "quotes": ["error", "single"],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
     "react/jsx-indent": ["error", 2],
     "react/jsx-indent-props": ["error", "first"],
     "require-await": "off",

package.json

@@ -54,6 +54,7 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-node": "^9.1.0",
     "eslint-plugin-react": "^7.14.2",
+    "eslint-plugin-react-hooks": "^1.6.0",
     "eslint-plugin-security": "^1.4.0",
     "expect-puppeteer": "^4.1.1",
     "file-loader": "^3.0.1",

src/components/editor/property/InputLiteral.jsx

@@ -17,15 +17,15 @@ import { booleanPropertyFromTemplate } from 'utilities/propertyTemplates'
 import _ from 'lodash'
 
 const InputLiteral = (props) => {
+  const inputLiteralRef = useRef(Math.floor(100 * Math.random()))
+  const [content, setContent] = useState('')
+  const [lang, setLang] = useState(defaultLanguageId)
+
   // Don't render if don't have property templates yet.
   if (!props.propertyTemplate) {
     return null
   }
 
-  const inputLiteralRef = useRef(Math.floor(100 * Math.random()))
-  const [content, setContent] = useState('')
-  const [lang, setLang] = useState(defaultLanguageId)
-
   const disabled = !booleanPropertyFromTemplate(props.propertyTemplate, 'repeatable', true)
       && Object.keys(props.items).length > 0
 

src/components/editor/property/InputLookupSinopia.jsx

@@ -17,13 +17,14 @@ import _ from 'lodash'
 const AsyncTypeahead = asyncContainer(Typeahead)
 
 const InputLookupSinopia = (props) => {
+  const [isLoading, setLoading] = useState(false)
+  const [options, setOptions] = useState([])
+
   // Don't render if no property template yet
   if (!props.propertyTemplate) {
     return null
   }
 
-  const [isLoading, setLoading] = useState(false)
-  const [options, setOptions] = useState([])
   const isMandatory = booleanPropertyFromTemplate(props.propertyTemplate, 'mandatory', false)
   const isRepeatable = booleanPropertyFromTemplate(props.propertyTemplate, 'repeatable', true)
 

src/components/editor/property/InputURI.jsx

@@ -18,15 +18,15 @@ import { booleanPropertyFromTemplate } from 'utilities/propertyTemplates'
 import _ from 'lodash'
 
 const InputURI = (props) => {
+  const inputLiteralRef = useRef(Math.floor(100 * Math.random()))
+  const [content, setContent] = useState('')
+  const [uriError, setURIError] = useState(false)
+
   // Don't render if don't have property templates yet.
   if (!props.propertyTemplate) {
     return null
   }
 
-  const inputLiteralRef = useRef(Math.floor(100 * Math.random()))
-  const [content, setContent] = useState('')
-  const [uriError, setURIError] = useState(false)
-
   const disabled = !booleanPropertyFromTemplate(props.propertyTemplate, 'repeatable', true)
       && Object.keys(props.items).length > 0