Avoid constantly reinitializing focus (#265)

web/src/components/New/index.tsx

@@ -26,7 +26,6 @@ import { focusTextarea } from 'web/libs/dom';
 import { getEditorSessionkey } from 'web/libs/editor';
 import operations from 'web/libs/operations';
 import { getNotePath, notePathDef } from 'web/libs/paths';
-import { useFocus } from 'web/libs/hooks/dom';
 import Editor from '../Common/Editor';
 import Flash from '../Common/Flash';
 import { useDispatch, useSelector } from '../../store';
@@ -39,22 +38,6 @@ import styles from './New.scss';
 
 interface Props extends RouteComponentProps {}
 
-// useInitFocus initializes the focus on HTML elements depending on the current
-// state of the editor.
-function useInitFocus({ bookLabel, content, textareaRef, setTriggerFocus }) {
-  useEffect(() => {
-    if (!bookLabel && !content) {
-      setTriggerFocus();
-    } else {
-      const textareaEl = textareaRef.current;
-
-      if (textareaEl) {
-        focusTextarea(textareaEl);
-      }
-    }
-  }, [setTriggerFocus, bookLabel, textareaRef]);
-}
-
 const New: React.SFC<Props> = ({ history }) => {
   const sessionKey = getEditorSessionkey(null);
   const { editor } = useSelector(state => {

web/src/libs/hooks/dom.ts

@@ -16,7 +16,7 @@
  * along with Dnote.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useCallback, useRef } from 'react';
 
 import {
   KEYCODE_DOWN,
@@ -163,13 +163,13 @@ export function useSearchMenuKeydown<T = Option>({
 export function useFocus() {
   const elRef = useRef<HTMLElement>();
 
-  const setFocus = () => {
+  const setFocus = useCallback(() => {
     const currentEl = elRef.current;
 
     if (currentEl) {
       currentEl.focus();
     }
-  };
+  }, [elRef.current]);
 
   return [setFocus, elRef] as const;
 }