From 597db12b0ac08dab6167436113df392e716c5736 Mon Sep 17 00:00:00 2001 From: toririm Date: Wed, 6 Nov 2024 03:07:37 +0900 Subject: [PATCH] =?UTF-8?q?=E4=B8=8D=E9=81=A9=E5=88=87=E3=81=AAuseEffect?= =?UTF-8?q?=E3=81=AE=E4=BD=BF=E7=94=A8=E3=81=AB=E3=82=B3=E3=83=A1=E3=83=B3?= =?UTF-8?q?=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mobile/app/routes/welcome._index.tsx | 4 ++++ pos/app/components/functional/useCurrentTime.ts | 3 +++ pos/app/components/functional/useFocusRef.ts | 3 +++ .../functional/usePreventNumberKeyUpDown.tsx | 3 +++ .../components/functional/useSyncCahiserOrder.ts | 4 ++++ pos/app/components/molecules/AttractiveInput.tsx | 4 ++++ .../components/molecules/AttractiveTextArea.tsx | 4 ++++ pos/app/components/organisms/ConfirmDrawer.tsx | 3 +++ pos/app/components/organisms/DiscountInput.tsx | 4 ++++ pos/app/components/organisms/ItemAssign.tsx | 4 ++++ pos/app/components/organisms/OrderItemEdit.tsx | 16 ++++++++++++++++ pos/app/components/organisms/SubmitSection.tsx | 3 +++ pos/app/components/pages/CashierV2.tsx | 7 +++++++ pos/app/label/printer.js | 4 ++++ pos/app/routes/_header.tsx | 4 ++++ pos/app/routes/cashier-mini.tsx | 10 ++++++++++ 16 files changed, 80 insertions(+) diff --git a/mobile/app/routes/welcome._index.tsx b/mobile/app/routes/welcome._index.tsx index 35d51c30..869db55b 100644 --- a/mobile/app/routes/welcome._index.tsx +++ b/mobile/app/routes/welcome._index.tsx @@ -26,6 +26,10 @@ export default function Welcome() { documentSub({ converter: orderConverter }), ); + /** + * 注文が完了した際に音を鳴らす + * OK + */ useEffect(() => { if (!order?.readyAt) { return; diff --git a/pos/app/components/functional/useCurrentTime.ts b/pos/app/components/functional/useCurrentTime.ts index 4d8f3ffb..32716d02 100644 --- a/pos/app/components/functional/useCurrentTime.ts +++ b/pos/app/components/functional/useCurrentTime.ts @@ -8,6 +8,9 @@ import { useEffect, useState } from "react"; export const useCurrentTime = (interval: number) => { const [currentTime, setCurrentTime] = useState(new Date()); + /** + * OK + */ useEffect(() => { const intervalId = setInterval(() => { setCurrentTime(new Date()); diff --git a/pos/app/components/functional/useFocusRef.ts b/pos/app/components/functional/useFocusRef.ts index ccc4f26c..11f849ef 100644 --- a/pos/app/components/functional/useFocusRef.ts +++ b/pos/app/components/functional/useFocusRef.ts @@ -8,6 +8,9 @@ import { useEffect, useRef } from "react"; const useFocusRef = (focus: boolean) => { const DOMRef = useRef(null); + /** + * OK + */ useEffect(() => { if (focus) { DOMRef.current?.focus(); diff --git a/pos/app/components/functional/usePreventNumberKeyUpDown.tsx b/pos/app/components/functional/usePreventNumberKeyUpDown.tsx index d8941165..34833d95 100644 --- a/pos/app/components/functional/usePreventNumberKeyUpDown.tsx +++ b/pos/app/components/functional/usePreventNumberKeyUpDown.tsx @@ -4,6 +4,9 @@ import { useEffect } from "react"; * 上下キーで数値を増減させないEffect */ const usePreventNumberKeyUpDown = () => { + /** + * OK + */ useEffect(() => { const handler = (event: KeyboardEvent) => { if (event.key === "ArrowUp" || event.key === "ArrowDown") { diff --git a/pos/app/components/functional/useSyncCahiserOrder.ts b/pos/app/components/functional/useSyncCahiserOrder.ts index 717d309f..53ad5da1 100644 --- a/pos/app/components/functional/useSyncCahiserOrder.ts +++ b/pos/app/components/functional/useSyncCahiserOrder.ts @@ -5,6 +5,10 @@ export const useSyncCahiserOrder = ( order: OrderEntity, syncOrder: (order: OrderEntity) => void, ) => { + /** + * BAD: stateの更新にはuseEffectを使わない + * https://ja.react.dev/learn/you-might-not-need-an-effect#notifying-parent-components-about-state-changes + */ useEffect(() => { syncOrder(order); }, [order, syncOrder]); diff --git a/pos/app/components/molecules/AttractiveInput.tsx b/pos/app/components/molecules/AttractiveInput.tsx index 69b103b3..4772526f 100644 --- a/pos/app/components/molecules/AttractiveInput.tsx +++ b/pos/app/components/molecules/AttractiveInput.tsx @@ -24,6 +24,10 @@ const AttractiveInput = ({ focus, onTextSet, ...props }: props) => { [], ); + /** + * BAD: stateの更新にはuseEffectを使わない + * https://ja.react.dev/learn/you-might-not-need-an-effect#notifying-parent-components-about-state-changes + */ useEffect(() => { onTextSet(text); }, [text, onTextSet]); diff --git a/pos/app/components/molecules/AttractiveTextArea.tsx b/pos/app/components/molecules/AttractiveTextArea.tsx index 97d3f0c1..826f8050 100644 --- a/pos/app/components/molecules/AttractiveTextArea.tsx +++ b/pos/app/components/molecules/AttractiveTextArea.tsx @@ -24,6 +24,10 @@ const AttractiveTextArea = ({ focus, onTextSet, ...props }: props) => { [], ); + /** + * BAD: stateの更新にはuseEffectを使わない + * https://ja.react.dev/learn/you-might-not-need-an-effect#notifying-parent-components-about-state-changes + */ useEffect(() => { onTextSet(text); }, [text, onTextSet]); diff --git a/pos/app/components/organisms/ConfirmDrawer.tsx b/pos/app/components/organisms/ConfirmDrawer.tsx index 8af996dd..b9a21f01 100644 --- a/pos/app/components/organisms/ConfirmDrawer.tsx +++ b/pos/app/components/organisms/ConfirmDrawer.tsx @@ -21,6 +21,9 @@ type props = ComponentProps & { const ConfirmDrawer = ({ children, focus, onConfirm, ...props }: props) => { const buttonRef = useRef(null); + /** + * OK + */ useEffect(() => { console.log("use eefect"); const wait = async () => { diff --git a/pos/app/components/organisms/DiscountInput.tsx b/pos/app/components/organisms/DiscountInput.tsx index a82742c2..7e9a8327 100644 --- a/pos/app/components/organisms/DiscountInput.tsx +++ b/pos/app/components/organisms/DiscountInput.tsx @@ -56,6 +56,10 @@ const DiscountInput = memo( [discountOrder], ); + /** + * BAD: useEffect内でstateを更新している + * https://ja.react.dev/learn/you-might-not-need-an-effect#notifying-parent-components-about-state-changes + */ useEffect(() => { if (isComplete && discountOrder) { onDiscountOrderFind(discountOrder); diff --git a/pos/app/components/organisms/ItemAssign.tsx b/pos/app/components/organisms/ItemAssign.tsx index b4576b5c..085cfdaa 100644 --- a/pos/app/components/organisms/ItemAssign.tsx +++ b/pos/app/components/organisms/ItemAssign.tsx @@ -37,6 +37,10 @@ const ItemAssign = memo( }, [assignee, idx, mutateItem]); // アサイン入力欄を閉じるときに保存 + /** + * BAD: useEffect内でstateを更新している + * https://ja.react.dev/learn/you-might-not-need-an-effect#notifying-parent-components-about-state-changes + */ useEffect(() => { if (!focus) { saveAssignInput(); diff --git a/pos/app/components/organisms/OrderItemEdit.tsx b/pos/app/components/organisms/OrderItemEdit.tsx index ba14c000..d302ab16 100644 --- a/pos/app/components/organisms/OrderItemEdit.tsx +++ b/pos/app/components/organisms/OrderItemEdit.tsx @@ -66,6 +66,9 @@ const OrderItemEdit = memo( }, [itemFocus, onRemoveItem]); // ↑・↓ が押されたときに itemFocus を移動 + /** + * OK + */ useEffect(() => { const handler = (event: KeyboardEvent) => { switch (event.key) { @@ -88,6 +91,9 @@ const OrderItemEdit = memo( }, [focus, moveItemFocus]); // Enter が押されたときに assign 入力欄を開く + /** + * OK + */ useEffect(() => { const handler = (event: KeyboardEvent) => { if (event.key === "Enter") { @@ -104,6 +110,9 @@ const OrderItemEdit = memo( // キー操作でアイテムを追加 // Backspace でアイテムを削除 + /** + * OK + */ useEffect(() => { const handler = (event: KeyboardEvent) => { if (!focus) return; @@ -120,6 +129,9 @@ const OrderItemEdit = memo( }, [focus, onAddItem, removeItem, editable]); // focus が外れたときに itemFocus をリセット + /** + * OK + */ useEffect(() => { if (!focus) { setItemFocus(-1); @@ -130,6 +142,10 @@ const OrderItemEdit = memo( }, [focus]); // itemFocus が range 外に出ないように調整 + /** + * BAD: useEffect内でstateを更新している + * https://ja.react.dev/learn/you-might-not-need-an-effect#notifying-parent-components-about-state-changes + */ useEffect(() => { setItemFocus((prev) => Math.min(order.items.length - 1, Math.max(-1, prev)), diff --git a/pos/app/components/organisms/SubmitSection.tsx b/pos/app/components/organisms/SubmitSection.tsx index f40e3f49..6d852cff 100644 --- a/pos/app/components/organisms/SubmitSection.tsx +++ b/pos/app/components/organisms/SubmitSection.tsx @@ -15,6 +15,9 @@ export const SubmitSection = ({ submitOrder, order, focus }: props) => { [order], ); + /** + * OK + */ useEffect(() => { if (focus) { buttonRef.current?.focus(); diff --git a/pos/app/components/pages/CashierV2.tsx b/pos/app/components/pages/CashierV2.tsx index e490a216..f22f92c4 100644 --- a/pos/app/components/pages/CashierV2.tsx +++ b/pos/app/components/pages/CashierV2.tsx @@ -59,6 +59,10 @@ const CashierV2 = ({ items, orders, submitPayload, syncOrder }: props) => { usePreventNumberKeyUpDown(); + /** + * BAD: useEffect内でstateを更新している + * https://ja.react.dev/learn/you-might-not-need-an-effect#notifying-parent-components-about-state-changes + */ useEffect(() => { newOrderDispatch({ type: "updateOrderId", orderId: nextOrderId }); }, [nextOrderId, newOrderDispatch]); @@ -97,6 +101,9 @@ const CashierV2 = ({ items, orders, submitPayload, syncOrder }: props) => { }; }, [proceedStatus, previousStatus, resetAll]); + /** + * OK + */ useEffect(() => { const handler = (event: KeyboardEvent) => { const key = event.key; diff --git a/pos/app/label/printer.js b/pos/app/label/printer.js index 5e695efa..81fdfe6f 100644 --- a/pos/app/label/printer.js +++ b/pos/app/label/printer.js @@ -9,6 +9,10 @@ export const useRawPrinter = () => { const ePosDeviceRef = useRef(); const printerRef = useRef(); + /** + * BAD + * https://ja.react.dev/learn/you-might-not-need-an-effect#initializing-the-application + */ useEffect(() => { if (status === "init") { connect(); diff --git a/pos/app/routes/_header.tsx b/pos/app/routes/_header.tsx index 1550b3ba..007bace8 100644 --- a/pos/app/routes/_header.tsx +++ b/pos/app/routes/_header.tsx @@ -12,6 +12,10 @@ export default function BaseHeader() { const isOnline = useOnlineStatus(); const isOperational = useOrderStat(); + /** + * BAD + * https://ja.react.dev/learn/you-might-not-need-an-effect#initializing-the-application + */ useEffect(() => { onAuthStateChanged(auth, (user) => { if (user?.emailVerified) { diff --git a/pos/app/routes/cashier-mini.tsx b/pos/app/routes/cashier-mini.tsx index d239d0a9..b7619921 100644 --- a/pos/app/routes/cashier-mini.tsx +++ b/pos/app/routes/cashier-mini.tsx @@ -39,10 +39,17 @@ export default function CasherMini() { return order?.orderId; }, [order, logoShown, preOrder]); + /** + * BAD: useEffect内でstateを更新している + * https://ja.react.dev/learn/you-might-not-need-an-effect#notifying-parent-components-about-state-changes + */ useEffect(() => { setLogoShown(submittedOrderId != null || !isOperational); }, [submittedOrderId, isOperational]); + /** + * OK + */ useEffect(() => { if (!logoShown) { return; @@ -50,6 +57,9 @@ export default function CasherMini() { videoRef.current?.play(); }, [logoShown]); + /** + * OK + */ useEffect(() => { if (submittedOrderId === null) { return;