From 32d51bc3a0a9954464446d00c00c8402fb9036b1 Mon Sep 17 00:00:00 2001 From: Amr Mohamed Date: Thu, 24 Oct 2024 16:31:24 +0200 Subject: [PATCH 1/2] fix: FIx react act warnings --- src/internal/visual-mode/index.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/internal/visual-mode/index.ts b/src/internal/visual-mode/index.ts index c7c278b..7459f56 100644 --- a/src/internal/visual-mode/index.ts +++ b/src/internal/visual-mode/index.ts @@ -56,7 +56,18 @@ export function useDensityMode(elementRef: React.RefObject) { export function useReducedMotion(elementRef: React.RefObject) { const [value, setValue] = useState(false); useMutationObserver(elementRef, node => { - setValue(isMotionDisabled(node)); + const newValue = isMotionDisabled(node); + /** + * React has a behavior that triggers a re-render even if the same value is provided in the setState, while it does not + * commit any changes to the DOM (commit phase) the function rerenders. This causes a false react act warnings in testing + * and any component using the Transition component which in return uses this hook will possibly have false react warnings. + * + * To fix this, we manually stop setting the state ourselves if we see the same value. + * References: https://www.reddit.com/r/reactjs/comments/1ej505e/why_does_it_rerender_even_when_state_is_same/#:~:text=If%20the%20new%20value%20you,shouldn't%20affect%20your%20code + */ + if (newValue !== value) { + setValue(isMotionDisabled(node)); + } }); return value; } From 1ca9e29283b1fd6fcaeb7d3ce744097200e09068 Mon Sep 17 00:00:00 2001 From: Amr Mohamed Date: Fri, 25 Oct 2024 17:22:05 +0200 Subject: [PATCH 2/2] chore: Use "newValue" instead of querying the DOM again --- src/internal/visual-mode/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/internal/visual-mode/index.ts b/src/internal/visual-mode/index.ts index 7459f56..c1db2f8 100644 --- a/src/internal/visual-mode/index.ts +++ b/src/internal/visual-mode/index.ts @@ -66,7 +66,7 @@ export function useReducedMotion(elementRef: React.RefObject) { * References: https://www.reddit.com/r/reactjs/comments/1ej505e/why_does_it_rerender_even_when_state_is_same/#:~:text=If%20the%20new%20value%20you,shouldn't%20affect%20your%20code */ if (newValue !== value) { - setValue(isMotionDisabled(node)); + setValue(newValue); } }); return value;