Avoid state update when component is unmount #55
Merged
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.
What
Hi 👋, this PR closes #54 and avoid unnecessary renders.
How
It replaces the
useEffectAsync
andfetchURL
with a newuseMountFetch
hook and moves the link-related state management in the hook.See this commit for the implementation of the hook.
useEffectAsync
This hook keeps the request state (response, loading, error) and wraps the call to
ScraperWraper
so that:Moreover, this hooks has a loading state set to
true
as default to avoid unnecessary render on mount (due to setting the loading state totrue
).ReactTinyLink
Uses the
useEffectAsync
hook return values to manage its state. It passes a default value to the hook's response so that in case of error, the value of the component does not change and there is potentially less re-render inside the whole component (I did not profile, this is just an assumption).After this PR, the components renders only two times. Against four before.
Extra
I took the liberty to add an example in the demo to show the removal of the link. If you want me to this can be removed 🙂
Of course I am open to the discussion and do not hesitate to ask me for changes. Thank you for your time !