Fix(useScript): Prevent infinite loops caused by unstable props #1
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
… versions - Updated `npm-publish.yml` to use `actions/checkout@v4` and `actions/setup-node@v4`, changing the Node.js version to 20.x. - Updated `pull-request.yml` to use `actions/checkout@v4` and `actions/setup-node@v4`, modifying the Node.js version matrix to include 18.x and 20.x.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The
useScripthook was susceptible to infinite re-render loops if unstable references (e.g., inline functions or object literals) were passed foronReady,onError, orotherProps. This was because these props were included in the dependency array of the mainuseEffecthook, causing it to re-run on every render if the parent component provided new references.This commit addresses the issue by:
onReady,onError, andotherPropsinReact.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.useEffectanduseCallbackhooks to rely on these stable refs or their.currentvalues where appropriate.handleOnLoadandhandleOnErrornow have empty dependency arrays as they access props via refs.Additionally, test cases have been added in
src/index.test.tsxto 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.Describe what's being changed