Comments (4)
Thanks @ChanhyukPark-Tech .
Could you show us some example?
Because I think there are not much cases to use only cleanup function without any "effect".
I think this is the general case:
useEffect(() => {
window.addEventListener(/* ... */); // the "effect".
return () => window.removeEventListener(/* ... */); // cleaning up the "effect".
}, []);
from slash.
This is actually an anti-pattern since every effect and cleanup must match. (See https://beta.reactjs.org/learn/synchronizing-with-effects) If not, the app might break in React 18 strict mode.
So I think it is not appropriate for this hook to be merged into our libraries. For debounce and Lottie β I think they are incorrect code. So I think we should fix them.
from slash.
I agree too much with the opinion that there are not many situations where there will be cleanup without effect!
The case that I need to use this hook is as follows
currnet @toss/lottie: Lottie.tsx 177 line
useEffect(() => {
if (!isVisible) {
return;
}
if (!autoPlay) {
return;
}
startAnimation();
return () => {
animationChain?.destroy();
};
}, [animationChain, autoPlay, isVisible, startAnimation]);
I think animationChain
is
It doesn't seem to have much to do with autoPlay, isVisible, and startAnimation in the dependency array.
But I felt awkward being in the useEffect hook where they were connected.
If the animationChain
should be destroyed when this Lottie.tsx component is unmounted,
useUnmountEffect(() => animationChain?.destroy());
at the top of this file
I thought it would be better to write that!
I can also use useUnmountEffect
if I need to execute the callback I received from the parent component when the child component is unmounted
Another example
In useDebounce
hook 28line
useEffect(() => {
return () => {
debounced.cancel();
};
}, [debounced]);
there is no effect but only cleanup function is executing
So I think useUnmountEffect can improve this situation using
useUnmountEffect(() => debounced.cancle());
thank youπ
from slash.
Thank you for your kind explanation!
If I am working on a code to use like that pattern in the future, I should think about changing the structure itself.
I learned a lot!
from slash.
Related Issues (20)
- [Feature]: Support @tanstack/react-query v4 HOT 4
- [BUG]: `onClick` issue @ `ClickArea`
- [Feature]: Add isDefined HOT 1
- [BUG]: clamp returns wrong value HOT 1
- [Feature]: Support interactive playground in docs(https://slash.page) by adding codesandbox HOT 3
- [Feature]: FullHeight container's element could be other than just div HOT 13
- [BUG]: useStorageState hook type error HOT 5
- [BUG]: @toss/use-overlay change inner state of `CreateOverlayElement`'s JSX.Element HOT 3
- [Feature]: @toss/use-funnel μ NextJS 13 app directory μ§μ HOT 1
- [Feature]:νΉμ ν overlayλ§ μ΄κ³ λ«λ λ°©λ²μ΄ μμκΉμ? HOT 1
- [Feature]: ImpressionArea has Circular reference
- [Feature]: reverseKeyValue when object has multiple value. HOT 7
- [BUG]: typedStorage import type error HOT 1
- [Feature]: Support useSuspendedQueries
- [BUG] useQueryParam is not safe typely, runtimely HOT 2
- [Feature]: Suggestion to add test code when using 'μ΄μ/μ' option in `josa` function HOT 1
- [Feature]: update useBooleanState return value Array to Object HOT 4
- [BUG]: @tossteam/jest install error
- [Feature]: Is it useful to take out the `useKey` hook separately? HOT 4
- [BUG]: useOutsideClickEffect does not behave like a document HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from slash.