useEffect、useCallbackに使う値にuseMemoを用いる (#57)

Author: dc7290

package-lock.json

@@ -18,7 +18,6 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "body-scroll-lock": "^3.1.5",
-    "deepmerge": "^4.2.2",
     "focus-trap": "^7.0.0"
   },
   "devDependencies": {

package.json

@@ -1,5 +1,5 @@
 import { Options as FocusTrapOptions } from 'focus-trap';
-import React, { useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { ModalProps, OverlayProps, WrapperProps } from '..';
 
@@ -34,11 +34,15 @@ export const ModalWrapper: React.FC<ModalWrapperProps> = ({
   components,
 }) => {
   const dialogRef = useRef<HTMLDivElement>(null);
-  useFocusTrap(dialogRef, isOpen, {
-    onDeactivate: close,
-    clickOutsideDeactivates: true,
-    ...focusTrapOptions,
-  });
+  const _focusTrapOptions = useMemo(
+    () => ({
+      onDeactivate: close,
+      clickOutsideDeactivates: true,
+      ...focusTrapOptions,
+    }),
+    [close, focusTrapOptions]
+  );
+  useFocusTrap(dialogRef, isOpen, _focusTrapOptions);
   useBodyScrollLock(dialogRef, isOpen, preventScroll);
 
   if (isOpen === false) {

src/components/Modal.tsx

@@ -1,6 +1,5 @@
-import deepmerge from 'deepmerge';
 import { Options as FocusTrapOptions } from 'focus-trap';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   DefaultModal,
   DefaultOverlay,
@@ -49,12 +48,18 @@ export type UseModal = (
   isOpen: boolean
 ];
 
-export const useModal: UseModal = (elementId = 'root', options = {}) => {
-  const {
-    preventScroll = false,
-    focusTrapOptions = {},
-    components = {},
-  } = deepmerge<UseModalOptions>(useModalConfig(), options);
+const defaultOptions: Required<UseModalOptions> = {
+  preventScroll: false,
+  focusTrapOptions: {},
+  components: {},
+};
+
+export const useModal: UseModal = (elementId = 'root', options) => {
+  const modalConfig = useModalConfig();
+  const { preventScroll, focusTrapOptions, components } = useMemo(
+    () => Object.assign({}, defaultOptions, modalConfig, options),
+    [modalConfig, options]
+  );
   const [isOpen, setOpen] = useState<boolean>(false);
 
   const open = useCallback(() => {
@@ -80,7 +85,11 @@ export const useModal: UseModal = (elementId = 'root', options = {}) => {
           description={description}
           preventScroll={preventScroll}
           focusTrapOptions={focusTrapOptions}
-          components={{ Modal, Overlay, Wrapper }}
+          components={{
+            Modal,
+            Overlay,
+            Wrapper,
+          }}
         >
           {children}
         </ModalWrapper>