Merge pull request #125 from xsnippet/useMemo

[React useMemo] Add useMemo hook for syntaxes

Author: lotrien

src/components/NewSnippet.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useMemo } from 'react'
 import { connect } from 'react-redux'
 import AceEditor from 'react-ace'
 import { WithContext as Tags } from 'react-tag-input'
@@ -70,14 +70,14 @@ const NewSnippet = ({ dispatch, history, syntaxes }) => {
   const handleSyntax = syntax => ({ syntax })
   const handleContent = content => ({ content })
 
-  const getSyntaxes = () => {
+  const memoizedSyntaxes = useMemo(() => {
     const { modesByName } = getModesByName()
 
     return syntaxes.map(item => ({
       name: modesByName[item].caption,
       value: item,
     }))
-  }
+  }, [syntaxes])
 
   const renderValidationError = () => (error && <Notification message={error} />)
 
@@ -128,7 +128,7 @@ const NewSnippet = ({ dispatch, history, syntaxes }) => {
       </div>
       <div className="new-snippet-lang-wrapper">
         <ListBoxWithSearch
-          items={getSyntaxes()}
+          items={memoizedSyntaxes}
           onClick={(syntax) => handleChange(syntax, handleSyntax)}
         />
       </div>

src/hooks/useForm.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect } from 'react'
 
 const useForm = (cb, validate) => {
   const [values, setValues] = useState({})
@@ -15,21 +15,21 @@ const useForm = (cb, validate) => {
     }
   }, [error, isSubmitting])
 
-  const handleSubmit = useCallback(e => {
+  const handleSubmit = e => {
     e.preventDefault()
 
     setError(validate(values))
     setIsSubmitting(true)
-  })
+  }
 
-  const handleChange = useCallback((e, setter) => {
+  const handleChange = (e, setter) => {
     if (e.target) {
       e.persist()
       setValues(values => ({ ...values, [e.target.name]: e.target.value }))
     } else {
       setValues(values => ({ ...values, ...setter(e) }))
     }
-  })
+  }
 
   return {
     handleChange,