developit / preact-transition-group

transition-group ui component for preact
https://npm.im/preact-transition-group
52 stars 9 forks source link

Fix bug with component mounting after willEnter #4

Closed mattdesl closed 6 years ago

mattdesl commented 6 years ago

In preact@8, there is an odd issue where comopnentDidMount() gets fired after componentWillEnter. I added a simple fix in this PR by just delaying the appear/leave functions, but perhaps somebody with more knowledge of preact@8 internals will know of a better solution.

Here is a test case that shows the fix, the console logs show the incorrect order of functions (enter -> mount), but after applying the patch they will show correct order (mount -> enter).

import { h, render, Component } from 'preact';
import TransitionGroup from 'preact-transition-group';

class Test extends Component {
  componentDidMount () {
    console.log('did mount');
  }
  componentWillEnter (done) {
    console.log('did enter', done());
  }
  componentWillAppear (done) {
    console.log('did appear', done());
  }
}
class App extends Component {

  constructor () {
    super();
    this.state = { toggled: true };
  }

  componentDidMount () {
    window.addEventListener('click', () => {
      this.setState({ toggled: !this.state.toggled });
    });
  }
  render (_, { toggled }) {
    return <TransitionGroup>{toggled && <Test />}</TransitionGroup>;
  }
};

render(<App />, document.body);
developit commented 6 years ago

Sorry for taking so long to get to this!