You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Fix(useScript): Prevent infinite loops caused by unstable props
The `useScript` hook was susceptible to infinite re-render loops if
unstable references (e.g., inline functions or object literals) were
passed for `onReady`, `onError`, or `otherProps`. This was because
these props were included in the dependency array of the main `useEffect`
hook, causing it to re-run on every render if the parent component
provided new references.
This commit addresses the issue by:
1. Wrapping `onReady`, `onError`, and `otherProps` in `React.useRef`.
This ensures that their latest values are accessible within the
hook's effects and callbacks without causing re-runs if the
underlying values haven't changed.
2. Updating the dependency arrays of `useEffect` and `useCallback`
hooks to rely on these stable refs or their `.current` values where
appropriate. `handleOnLoad` and `handleOnError` now have empty
dependency arrays as they access props via refs.
Additionally, test cases have been added in `src/index.test.tsx` to
specifically verify that the hook behaves correctly when unstable props
are provided, ensuring the script is loaded only once and no infinite
loops occur. Both success and error paths for script loading are tested
under these conditions.
0 commit comments