developit / developit/preact-transition-group
Cannot read property 'componentDidLeave' of null
- Dominant language
- JavaScript
- Stars
- 54
- Forks
- 9
- PR merge metrics
- No merged PRs in 30d
Description
There seems to be a timing issue if multiple transitions use different callback times.
https://codesandbox.io/s/preact-transition-group-forked-wsksj?file=/src/index.js
**error**:
`Cannot read property 'componentDidLeave' of null` in `preact-transition-group/dist/preact-transition-group.mjs:99:10`

**reproduction example**:
(if the error doesn't happen on the first run please reload)
```jsx
import { Component, createRef, Fragment, render } from "preact";
import { useEffect, useState } from "preact/hooks";
import TransitionGroup from "preact-transition-group";
const App = () => {
const [items, setItems] = useState([0 , 1]);
useEffect(() => {
setTimeout(() => setItems([0]) , 500)
setTimeout(() => setItems([0, 2, 3]) , 1000)
setTimeout(() => setItems([0, 1]) , 1500)
setTimeout(() => setItems([0, 2, 3]) , 2000)
setTimeout(() => setItems([0, 1]) , 2100)
}, [])
return (
{items.map((value) => (
{value}
))}
);
};
class FadeIn extends Component {
ref = createRef();
componentWillAppear(callback) {
console.log("+ componentWillAppear", this.ref.current.innerHTML);
setTimeout(() => {
this.ref.current.style.opacity = "1";
});
setTimeout(callback, this.props.duration);
}
componentDidAppear() {
console.log("+ componentDidAppear", this.ref.current.innerHTML);
}
componentWillEnter(callback) {
console.log("+ componentWillEnter", this.ref.current.innerHTML);
setTimeout(() => {
this.ref.current.style.opacity = "1";
});
setTimeout(callback, this.props.duration);
}
componentDidEnter() {
console.log("+ componentDidEnter", this.ref.current.innerHTML);
}
componentWillLeave(callback) {
console.log("- componentWillLeave", this.ref.current.innerHTML);
setTimeout(() => {
this.ref.current.style.opacity = "0";
});
setTimeout(callback, this.props.duration);
}
componentDidLeave() {
console.log("- componentDidLeave", this.ref.current.innerHTML);
}
render() {
return (
{this.props.children}
);
}
}
if (typeof window !== "undefined") {
render(, document.getElementById("root"));
}
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.