developit / developit/preact-transition-group

Cannot read property 'componentDidLeave' of null

Open
#16 0 comments 0 reactions 0 assignees View on GitHub
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`

error

**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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.