Skip to content

Commit 70784fd

Browse files
authored
fix: dependencies array changes size between renders (#1229)
## 📜 Description Fixed `The final argument passed to %s changed size between renders. The order and size of this array must remain constant.` warning. ## 💡 Motivation and Context This warning happens inside `useSmoothKeyboardHandler` and started to happen after #1209 The main difference from these changes is that we started to use `useHandler`/`useEvent` hooks, while in the past we simply used direct worklet registration. Turns out `useAnimatedReaction` modifies array of dependencies: ```tsx if (dependencies === undefined) { dependencies = [ ...Object.values(prepare.__closure ?? {}), ...Object.values(react.__closure ?? {}), prepare.__workletHash, react.__workletHash, ]; } else { dependencies.push(prepare.__workletHash, react.__workletHash); } ``` Then `useHandler` (used in `useKeyboardHandler`) uses `buildDependencies` which also modifies the array of dependencies: ```ts dependencies.push(buildWorkletsHash(handlersList)); ``` So if we use deps like: ```ts const useMyCustomHook = (deps) => { useAnimatedReaction(() => {}, deps); useKeyboardHandler({}, deps); } ``` Then we'll get this warning because we mutate deps two times. To fix this issue I decided to make a shallow copy of `deps` for `useAnimatedReaction` hook. It fixes the problem 🤞 Closes #1228 ## 📢 Changelog <!-- High level overview of important changes --> <!-- For example: fixed status bar manipulation; added new types declarations; --> <!-- If your changes don't affect one of platform/language below - then remove this platform/language --> ### JS - create shallow array copy for `useAnimatedReaction` in `useSmoothKeyboardHandler`; ## 🤔 How Has This Been Tested? Tested manually on iPhone 16 Pro. ## 📸 Screenshots (if appropriate): |Before|After| |-------|-----| |<video src="https://github.com/user-attachments/assets/a82b9e6d-adb9-4530-9f2c-2b50ec954386">|<video src="https://github.com/user-attachments/assets/e8fe2cac-bb8c-47eb-89ac-b8d34d01591f">| ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed
1 parent 3e059e7 commit 70784fd

File tree

1 file changed

+2
-2
lines changed

1 file changed

+2
-2
lines changed

src/components/KeyboardAwareScrollView/useSmoothKeyboardHandler.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,8 @@ export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
8686
persistedHeight.value = height.value;
8787
}
8888
},
89-
// REA uses own version of `DependencyList` and it's not compatible with the same type from React
90-
deps as unknown[],
89+
// create shallow copy (if deps specified) since `useAnimatedReaction` modifies them
90+
deps ? [...deps] : deps,
9191
);
9292

9393
useKeyboardHandler(

0 commit comments

Comments
 (0)